Web Animation with Gsap & Reactjs

Learn how to create smooth parallax animation transition in your website with the following :

useEffect react hook (Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class and The Effect Hook lets you perform side effects in function components).

useRef react hook (useRef is like a “box” that can hold a mutable value in its .current property and returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component) it is similar to Document.getElementById().

ScrollTrigger from Gsap (to help Animate anything on scroll).
- MatchMedia to hide animation on Mobile view.
- Animation timeline (is a container for Tweens. It’s the ultimate sequencing tool that lets you position animations in time wherever you want and then control the whole sequence easily with methods like pause(), play(), progress(), reverse(), timeScale(), etc).

Gsap methods ( to, from and fromTo ) to create a animated object going to, or coming from, or even you can automate the coming and going values).

Controlling Tweens, Timelines, and ScrollTrigger (duration, transition type, dimension axis, trigger, start, end, scrub, toggleActions).

This topic is to create a simple interactive animation to catch user attention on that particular animated section, and once you master the basic!! You can go further with the basic knowledge to advance level and create something similar to apple website.

I’m going to use three colored boxes for this example, but you can use your one images, text or anything.

Step 1
Go ahead and create your elements together with your style creativity. And import useRef from React to link those elements.

Step 1 figure

Step 2
Import gsap and ScrollTrigger to the project and register the plugin gsap.registerPlugin(ScrollTrigger).

Step 3
Import useEffect to the current imported React and save the styles with ScrollTrigger.

Step 3 figure

Step 4
Create new const to define the timeline. We need it to clear the timeline before/after new methods const tl = gsap.timeline().

Step 5
Before we start writing our gsap methods! We need to wrap everything with matchMedia to show animation on desktop only and hide it on mobile. Why ? Is a common practices for users to see the content with small screen size without interruptions, also the animation on mobile it could delay the content from being display and it could also create bounce rate if user didn’t get what the animation here for. You can specify your own number for media query.

Step 5 figure, Note I cleared the timeline before starting.

Step 6
The most important step is to add gsap methods to control the before and the after position to our colored elements (green, pink and yellow). So first of all let’s initialize the element on start position, take a look on the example below were the first thing you see when you start scrolling down.

Step 6 figure

I’m using X and Y to position the elements in place were if user start scroll the position will change dynamically. And we will accomplish that by using gsap.fromTo method. See the image with code below.

Step 6.1 figure

As you see in the figure 6.1 we added scrollTrigger inside the the matchMedia wrapper and below the timeline clearance, with methods as following :

• Trigger : Is to trigger the id or the ref that identify the animated element.
• Start : Is where the element should start when user start to scroll from top with precise value you can add.
• End : Similar to start, but is where to end the transition of the animated element.
• Scrub : ScrollTriggers can perform an actions on an animation (play, pause, resume, restart, reverse, complete, reset) when entering/leaving the defined area or link it directly to the scrollbar so that it acts like a scrubber (scrub: 1).
• ToggleAction : Determines how the linked animation is controlled at the 4 distinct toggle places — onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none.

Do the same to the other two elements pink and yellow with desired position from => to, as you saw in figure 6.1.

Eventually the elements will interact with the user scroll behavior. It Is not that you need to refresh the page to get back to the scrolling fantasy No!. It is dynamically values changes every time you do the scroll.

Thank you and happy scrolling :)

Note : please visit React hooks Docs and GreenSock ScrollTriger() docs to get detailed better ideas.