React.js is the most popular Javascript library and Greensock, the best JavaScript animation library. In this course we will combine them together to build amazing scroll-driven animation.

In this course, you will learn how to integrate scroll-driven animation in a more suitable and user-friendly way, giving you the ability to control the flow of animations while scrolling. We will cover topics such as parallax, scroll animation, staggered Text Reveal and image sequence animation.

At this end of this class, you will be able to start thinking about designing with motion and to animate any web site with emotion.

This course is a step by step course to make sure you understand exactly how React.js and GSAP work together, and will get you a new job working as a front end developper or help you build that experience you've always been dreaming about. This course also care about design and not only programming.

What will you build?

This course features 13 videos to help you understand how React.js and Greensock (GSAP) work. No prior experience with either is necessary. We will build together an amazing page with aesthetic and fine tune animation. Each section in this course is added incrementally, to make sure that you have a solid foundation of knowledge.

This is a list of the topics you'll learn in this course:

• Styled your component with styled-components

• Integrate SVG in your project

• Create a parallax effect with the UseImperativeHandle hooks

• Target and Animate elements on scroll using React and Greensock (GSAP)

• Passing props to components

• Create a split text staggered animation with Greensock (GSAP)

• Pining and unpinning while scrolling

• Create a crossreveal image on scroll using React and Greensock (GSAP)

• Animate an image sequence on scroll with ScrollTrigger and canvas

• Create a custom cursor with scale hover and click effect

• React state management

Happy coding !