How To Make an Image Reveal On Scroll with React Next.js and Gsap
With this tutorial we see how to create an image reveal animation with React, Next.js and Gsap with ScrollTrigger, that only gets triggered when the image is into the viewport.
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...
Copyright free track used for this video:
https://www.freelofi.com/lofi-yellow/
▬▬▬▬▬▬ WHERE TO FIND ME ▬▬▬▬▬▬
Let`s talk on X (Twitter):
/ ivansmiths
My personal portfolio:
https://www.ivansmiths.com/
▬▬▬▬▬▬ TIMESTAMPS ▬▬▬▬▬▬
Timestamps:
00:00 Image reveal animation demonstration
00:28 Setup next.js project
01:46 Build Hero component
02:56 Add images and data for the projects
04:21 Create components fro the animation
10:51 Create React custom hook
13:56 Develop the Image reveal animation
19:53 Complete project
