Build Amazing Page Transitions In Only 12 Minutes

Having animated page transitions on a website makes it appear incredibly polished and adds an extra touch that most websites do not have. Luckily the process of adding these page transition animations is incredibly easy. All it takes is a single library called Swup and a few CSS styles and your entire web application will have smooth animations.

In this video I am going to take your through the entire process of creating animated page transitions and I will explain every line of code as I go. By the end of these 12 minutes we will have a fully functional website with page transitions between every page.

📚 Materials/References:

Swup Documentation: https://swup.js.org/getting-started GitHub Code: https://github.com/WebDevSimplified/Page-Transitions-and-Animations-With-Swup How To Install Node.js: https://youtu.be/VShtPwEkDD0

🧠 Concepts Covered:

• CSS animations
• Swup page transition library
• How to use npm to install libraries
• How to animate the CSS transform property

🌎 Find Me Here:

My Website: https://webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified

#Swup #WDS #PageTransition ... https://www.youtube.com/watch?v=eVwH3VL1EsA