Page Transition for HTML Page | BarbaJs Page Transition Using GSAP
Page Transition is one of the most desired animations that everyone loves. In this video, we'll be coding page transitions using Barba.js. We will learn how to implement easy page transitions for various pages using Barba.js and animate our pages using the GSAP (GreenSock) animation library. For styling, we'll utilize the fantastic Tailwind CSS and SASS.
Additionally, we'll explore how to build and deploy it on Netlify effortlessly. Moreover, we'll delve into some JavaScript tips and tricks that will help us create common or reusable functions. From installation to project completion, I've got you covered!
🔗 Here's the source code: https://github.com/NAYMUR143/gsap-flip
🛠️ Technologies Covered:
1.Vitejs
2.HTML
3.CSS
4.JavaScript
5.BarbaJs
6.GSAP
🕰️ Timestamps:
Preview: (00:00)
Intro: (01:19)
Install barbajs: (02:03)
Initialize barbajs: (02:55)
create common function :(06:09)
About page / 2nd page transition:(15:46)
Image Cliping Explain:(29:00)
build for deploy:(34:37)
deploy on netlify:(34:55)
Outro(36:44)
🔗 Subscribe for NEW VIDEOS and Stay Tuned for More Exciting Tutorials!
Thank you once again for being a part of this incredible journey. Let's continue learning and
growing together! 🌟
____________________________________________________
🎯Contact me to know about my channel and me:
👍LinkedIn: / naymur-rahman
👍Twitter: / naymur_dev
#gsapanimation #gsap #naymurweb
