Make Your React Next js Portfolio Stand Out with Perspective and Gsap
Damn the audio is worse than the previous videos. Forgot to add the limiter on OBS.
With this tutorial we see how to add a perspective effect with React and Next.js and how to animate it with Gsap ScrollTrigger.
▬▬▬▬▬▬ USEFUL LINKS ▬▬▬▬▬▬
Complete repo on GitHub:
https://github.com/IvanSmiths/tutoria...
Comlete repo on Gumroad:
https://ivansmiths.gumroad.com/l/next...
Inspiration from Matías Pitters:
/ 1639522471857762304
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 Video demonstration
00:25 Adding placeholder data
00:50 Adding jsx
01:38 Style the jsx
03:35 Selecting all the elements
03:51 Using an array of Ref
04:07 Animate perspective with gsap
05:41 Perspective animation complete
