[Web] Keyframe does not work on the web

[yatessss]

Description

example in doc https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/keyframeAnimations#example, does not work on web (no animation).

but work fine in native platform.

export function KeyframeAnimation(): React.ReactElement {
  const [show, setShow] = useState(false);

  const enteringAnimation = new Keyframe({
    0: {
      originX: 50,
      transform: [{ rotate: '45deg' }],
    },
    30: {
      originX: 10,
      transform: [{ rotate: '-90deg' }],
    },
    100: {
      originX: 0,
      transform: [{ rotate: '0deg' }],
      easing: Easing.quad,
    },
  }).duration(2000);

  const exitingAnimation = new Keyframe({
    0: {
      opacity: 1,
      transform: [{ skewX: '0deg' }],
    },
    30: {
      opacity: 0.5,
      transform: [{ skewX: '40deg' }],
      easing: Easing.exp,
    },
    100: {
      opacity: 0,
      transform: [{ skewX: '-10deg' }],
    },
  }).duration(2000);
  
  return (
    <View style={{ flexDirection: 'column-reverse' }}>
      <Button
        title="animate"
        onPress={() => {
          setShow((last) => !last);
        }}
      />
      <View
        style={{ height: 400, alignItems: 'center', justifyContent: 'center' }}>
        {show && (
            <Animated.View
              entering={enteringAnimation}
              exiting={exitingAnimation}
              style={{
                height: 100,
                width: 200,
                backgroundColor: 'blue',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            />
        )}
      </View>
    </View>
  );
}

Steps to reproduce

copy code in project and run

Snack or a link to a repository

no

Reanimated version

2.9.0

React Native version

0.69.0

Platforms

Web

JavaScript runtime

No response

Workflow

No response

Architecture

No response

Build type

No response

Device

No response

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[tomekzaw]

Hey @yatessss, thanks for submitting this issue.

Unfortunately, Layout Animations are not supported on Web yet. 😢

[fo-fo]

Any plans to add layout animations for web?

Also it might be a good idea to add a blurb to https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support to explain that it's not supported at this time.

[tomekzaw]

Any plans to add layout animations for web?

Yes, but first we need to finish refactoring Layout Animations for Android & iOS which is currently in progress.

Also it might be a good idea to add a blurb to https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support to explain that it's not supported at this time.

That's right, thanks for the suggestion!

[David06A]

Hey! Any news or a place I can check for any regarding keyframes on web

[TNAJanssen]

Yeah this feature would be really nice!

[Akronae]

Also looking forward to it. Might be a good idea to specify in the docs that it is currently not available for web.

[jaivinwylde]

What's the timeline for this? How much of the refactor for mobile layout animations have been completed @tomekzaw?

[jaivinwylde]

?

[tomekzaw]

Hey, Layout Animations for mobile have been finished and released in 3.0.0-rc.6.

[jaivinwylde]

Also looking forward to it. Might be a good idea to specify in the docs that it is currently not available for web.

☝️

[yatessss]

Hey, Layout Animations for mobile have been finished and released in 3.0.0-rc.6.

Thank you for your help!

[Veeeeksi]

Dunno, why this is closed because Keyframe animations still won't work on web but I also look forward to see them in future so I don't have to implement separate animations for web + mobile!