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

DavidFox
September 23, 2022
251 views
1 vote
2 Answers

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

Tags: react-native

Answers

- server_unknown
- September 23, 2022 at 7:43 pm
- 0 votes
0
You could try react-native-animatable.

This would look something like this:
```
      <Animatable.View
        animation="bounceInLeft"
        duration={600}
       >
        <Text >
          Animation Example!
        </Text>
      </Animatable.View>
    );
```
Login or Signup to reply.

- J225cintVarga
- September 24, 2022 at 4:52 pm
- 0 votes
0
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.

Login or Signup to reply.