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