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 (https://unpkg.com/swup@latest/dist/swup.min.js).

  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 :- https://nvnamanvyas.github.io/portfolio/

My Project using CSS page transition

Top comments (2)

Collapse
 
manishfoodtechs profile image
manish srivastava

Naman very nice πŸ‘ŒπŸ‘ŒπŸ‘ŒπŸ‘Œ

Collapse
 
namanvyas profile image
Naman vyas

Thanks manish :)