DEV Community

Cover image for Website page transition with CSS
Naman vyas
Naman vyas

Posted on • Updated on

Website page transition with CSS

I am a beginner in website development. i was working on a project and i wanted to use page transition(but without javascript) in that but i was unable to find many methods and all methods are complex and using JavaScript.

After some time of research and google I found a library called swup.js . It's a easy to use library which uses CSS transition instead of JavaScript and you can also create cool things with swup events and javascript.

How to Use :

  1. First include this library using CDN (

  2. wrap all code into a main tag and give it a id with name "swap" and class with any name
    (example: id="swup" class="transition-fade")

  3. Enable swup using JS :-
    (only single line of javascript is needed)
    const swup = new Swup();

  4. animate main using CSS with class identifier :-
    .transition-fade {
    transition: 0.4s;
    opacity: 1;

My Project with swup JS :-

My Project using CSS page transition

Top comments (2)

manishfoodtechs profile image
manish srivastava

Naman very nice 👌👌👌👌

namanvyas profile image
Naman vyas

Thanks manish :)