Back to all resources
GSAP
ScrollTrigger
animation

GSAP card staggered animation

By Digipop
This JavaScript code snippet utilizes the GSAP (GreenSock Animation Platform) library to animate HTML elements when they enter the viewport. The code first includes the GSAP core library and the ScrollTrigger plugin from a CDN. It then selects elements with the classes 'class1' or 'class2'. Using the ScrollTrigger.batch() method, it applies an animation to these elements as they enter the viewport. The animation moves the elements from 32 pixels below their starting position to their final position while changing their opacity from 0 to 1 over a duration of 0.3 seconds. The animations are staggered by 0.2 seconds, meaning each subsequent element starts its animation slightly later than the previous one.