[Web] Keyframe does not work on the web

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

[TNAJanssen]

Yeah this feature would be really nice!

[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!