Next.js Horizontal Scroll With Gsap ScrollTrigger
21.6 هزار بار بازدید -
پارسال
-
In this tutorial I show
In this tutorial I show how you can code an horizontal scrolling section using Next.js with Gsap ScrollTrigger plugin.
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 GitHub repo:
https://github.com/IvanSmiths/next-gs...
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 Twitter!:
Twitter: IvanSmiths
My personal portfolio:
https://www.ivansmiths.com/
I am thrilled by the possibility of having you as a connection on LinkedIn.:
LinkedIn: ivan-fabbri
▬▬▬▬▬▬ TIMESTAMPS ▬▬▬▬▬▬
00:00 Horizontal scroll demonstration
00:17 Setup next.js project
02:00 Build Hero component
04:25 Build horizontal scroll animation
12:51 Build Footer component
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 GitHub repo:
https://github.com/IvanSmiths/next-gs...
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 Twitter!:
Twitter: IvanSmiths
My personal portfolio:
https://www.ivansmiths.com/
I am thrilled by the possibility of having you as a connection on LinkedIn.:
LinkedIn: ivan-fabbri
▬▬▬▬▬▬ TIMESTAMPS ▬▬▬▬▬▬
00:00 Horizontal scroll demonstration
00:17 Setup next.js project
02:00 Build Hero component
04:25 Build horizontal scroll animation
12:51 Build Footer component
پارسال
در تاریخ 1401/12/03 منتشر شده
است.
21,611
بـار بازدید شده