Make a Parallax effect with React, Next.js and Gsap ScrollTrigger

Опубликовано: 19 Январь 2025
на канале: IvanSmiths

47,219

642

With this tutorial we see how to create a parallax effect with React, Next.js and Gsap with ScrollTrigger.

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

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

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

Image used:
https://www.freepik.com/free-vector/w...

Interesting posts in Greensock forum about react strict mode: https://greensock.com/forums/topic/31...
https://greensock.com/forums/topic/35...

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 Parallax demonstration
00:51 Adding images
01:47 Referencing elements
02:03 Why using gsap.context
02:25 Code parallax animation
02:58 Gsap onUpdate function
03:30 Build the gsap timeline
04:06 Parallax animation finished