Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Pager Dots Animation with React Native (Reanimated)
Play lesson

Animate with Reanimated - Pager Dots Animation with React Native (Reanimated)

5.0 (1)
25 learners

What you'll learn

This course includes

  • 12 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

Have you ever felt the need to keep track of the pages you view on an Onboarding? Here it comes in handy to know how to make a custom pager from scratch. In this tutorial, we'll do exactly that by using Reanimated. My React Native course: https://www.reanimate.dev Shared 100+ Animations on Demos: https://reactiive.io/demos Twitter: https://twitter.com/reactiive_ Animate with Reanimated Playlist: https://www.youtube.com/watch?v=yz9E10Dq8Bg&list=PLjHsmVtnAr9TWoMAh-3QMiP7bPUqPFuFZ Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/25-pager-dots Chapters: 00:00 Introduction 01:29 Adding the ScrollView 04:30 Dots UI 12:19 Parametrize the container width 14:45 Dots animation 17:10 Access the scroll offset 20:20 Get the active index 24:12 Animate the background colors 27:25 Final touches

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere