Scrolling Animation with GSAP: Image Scaling and Position Shift - GSAP + Reactjs

 

GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

Here some Basic step to follow while create animation in GSAP.

1 : Register scrollTrigger plugin. while trigger element on scroll.
2 : Create React Hooks and write gsap code inside it.
3 : Use gsap.context(), Collects all GSAP animations and ScrollTrigger that are created within the supplied function so that you can easily revert() or kill()ALL of them at once.
4 : Create timeline and scrollTrigger base on your requirements.

Here, we first loop each section and trigger each section with zoom effects.

While triggering each section we are passing targets and config to zoom effects.

Here we create one zoomData object and set scale and origin of each section. So while in the trigger section each scaling and origin position apply to particular sections.