How do I create a simple slide in from left/right animation when the element comes into view on scroll?

David Fox 0
Viewed 37

I'm looking to create animations similar to those on this page as each element comes into view, except they would slide in from the left/right.

I've done things like this with React previously with framer motion like this:

<motion.div
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true }}
  transition={{ duration: 0.3, delay: 0.5 }}
  variants={{
    visible: { opacity: 1, x: 0 },
    hidden: { opacity: 0, x: 50 }
  }}
  >
  content
</motion.div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I can't seem to find a similar equivalent in React Native though. Does someone have a code sandbox and/or a npm package that can help with this?

Thanks

react-native
2 Answers

You could try react-native-animatable.

This would look something like this:

      <Animatable.View
        animation="bounceInLeft"
        duration={600}
       >
        <Text >
          Animation Example!
        </Text>
      </Animatable.View>
    );
server_unknown0

You can go with react-native-reanimated, and use entering LayoutAnimation.

I think this is one of the best, cuz almost every project has reanimated library, and these animations runs on the UI thread.

Quick note: As I know, the LayoutAnimation fundamentals is in rewriting phase right now.

Jácint Varga0
Related