Build Amazing Page Transitions In Only 12 Minutes

23
Published on July 8, 2022 by

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

Category

Add your comment

17 Comments

  • Leah 1 year ago

    I installed node.js into my computer, but my visual studio code isn't picking it up D:

  • Dhananjay Waghade 11 months ago

    Hey sir, my animation is working on visual studio. But it doesn't work of hosting

  • Janzca 10 months ago

    I'm working with php to add partials so I doesn't worked for me 🙁

  • Veruschka 10 months ago

    When i install swup it installs but none of the module folders are in my project folder. How would I fix this, please?

  • koribrus 10 months ago

    Is there any reason why this would not work at all. Is this still up to date?

    I have node installed. I installed swup via npm successfully. I'm using Visual Studio Code. I followed each step precisely. No errors are generated and nothing happens.

  • Glow0110 9 months ago

    This is a great, concise video. Well done!

  • Ahmed 8 months ago

    hello Kyle,
    I loved the way how you explained these concepts of swup but it seems like it requires some more deep explanation on how to use its plugin. I am newbie web designer and the problem that i am having is that when i use swup it starts the transition and works fine but it creates a problem with my css stylesheets. For example, i have 3 html pages, home , about us and services and for each of these i have different style sheets. when i use swup it replaces the stylesheet of the current loading page with that of the previous transitioning page which is becoming really problematic i have i tried using its plugins but i guess there is problem with me that i cannot figure out correctly how to use the plugins that seems the only solution to my problem. More over , even though if I successfully do some code to activate the plugin, it disables the swup-enabled class after which the entire animation is lost. So kyle please i really need your help.
    Regards,
    Ahmed.

  • Francois Smit 7 months ago

    Thank you, but how do I page without the .html extension in the url and isn't it very inefficient to have the nav code in all 3 files.

  • Mukesh Yadav 6 months ago

    Very helpful

  • Le Bojo de Twitch là 6 months ago

    Thank you bro! It's just amazing how this simple add-on make the website looks more Professional!

    Thanks a lot!! <3

  • Pyphst XI 5 months ago

    and, "rel" means relation.

  • C.J. Culver 5 months ago

    This can potentially help performance, right ? Since it gets rid of dead code or does it not make a difference ?

  • Selina Kehuan 3 months ago

    I'm not even building a website at the current moment but I just love how you talk and I actually watched the entire thing without needing it. You're such a great teacher!!

  • RGraph,net charts 3 months ago

    2 questions: 1. What is the SEO effect of using transitions? 2. How to do this without a library?

  • Ryan Breneman 2 months ago

    this isn't working for me… I have a script.js file that is filled with a preloader and a navbar hider, so I created a second js file called swupAni.js that has the script in it. Is this the reason my pages won't use swup for animations?

  • Shaun Pickett 1 month ago

    Short and sweet. 200 thumbs up

  • lloydvprice 1 month ago

    This is great, thanks for sharing. Can anyone advise on how I might implement this into a client's Squarespace site?