React Next.js Text Reveal with Gsap ScrollTrigger

Опубликовано: 08 Март 2023
на канале: IvanSmiths

10,459

233

With this tutorial we see how to create a Text reveal animation with React, Next.js and Gsap with ScrollTrigger, that only gets triggered when the text is into the viewport.
We will also use a custom react hook for handling an array of references.

Note that the code is almost identical if you use plain React.js. For that you just need to import ScrollTrigger from "gsap/ScrollTrigger"

▬▬▬▬▬▬ USEFUL LINKS ▬▬▬▬▬▬

Complete repo on GitHub:
https://github.com/IvanSmiths/tutoria...

Complete repo on Gumroad:
https://ivansmiths.gumroad.com/l/next...

Inspiration for text reveal animation:
https://www.vendredi-society.fr/

▬▬▬▬▬▬ WHERE TO FIND ME ▬▬▬▬▬▬

Let`s talk on X (Twitter):
/ ivansmiths

My personal portfolio:
https://www.ivansmiths.com/

▬▬▬▬▬▬ TIMESTAMPS ▬▬▬▬▬▬

Timestamps:
00:00 Text reveal animation demonstration
00:12 Split the text for the reveal
00:48 Style the text with Css
01:25 Custom hook for array of Ref
02:04 Build text reveal animation
02:28 Final text reveal animation