DEV Community

Cover image for Library AnimatedContentScroll
Uriel Cisneros
Uriel Cisneros

Posted on • Edited on

Library AnimatedContentScroll

πŸš€ New React Native component: AnimatedContentScroll.

🎞️ Animate content smoothly from any direction β€” left, right, top, or bottom β€” with simple props and great performance.

🧩 Built using Animated.timing with useNativeDriver for smooth 60fps transitions.

πŸ“¦ Lightweight, zero dependencies, and compatible with React Native CLI projects.

🧠 Fully written in TypeScript with clean and reusable code.
πŸ”§ Perfect for list items, cards, or any UI block that needs a nice entry animation.

πŸ“¦ Install via npm:

πŸ“‚ GitHub repo + demo:
πŸ”— https://lnkd.in/gpxEU-TC

πŸš€ Usage

import { AnimatedContentScroll } from 'react-native-animated-content-scroll';

export default function MyScreen() {
  return (
    <View style={{ padding: 20 }}>
      {[...Array(5)].map((_, index) => (
        <AnimatedContentScroll key={index} index={index}>
          <Text style={{ fontSize: 18, marginBottom: 10 }}>Item {index + 1}</Text>
        </AnimatedContentScroll>
      ))}
    </View>
  );
}
Enter fullscreen mode Exit fullscreen mode

πŸ”½ Check out the video below to see it in action!

Animate content scroll with differents animations

Top comments (0)