Full Stack Javascript Dev Specialized in Jamstack/Headless

Blog | Stefan S. - Jamstack Web Dev | stefansdev

Posts i wrote

BLOG

scroll-animation.gif

Scroll Animation

You probably seen it around. It's a trend , then it's not. But its definitely interesting and cool animation to have on your website. And it's not that hard to do. You don't have to write everything by yourself, there are a plenty of plugins to help you do animations.

I think this is the easiest way to achieve this animation.

For this example we are going to use&nbsp;<a href="https://greensock.com/scrolltrigger/">ScrollTrigger - Plugin for GSAP</a>.

Note: in this example I'm using TailwindCss. If you are not familiar with it, you can use your preferred way of styling. For me it's much easier to have style and everything in one place.

Import GSAP and ScrollTrigger in page or component

And thats it . Your component should look like this:

You can now customize and tailor it for your needs. Everything you needed to understand is in&nbsp;the <b>useEffect</b>&nbsp;hook.

Meta React Gsap

How to create scroll triggered moving text with React & GSAP