Website page transition with CSS

#html #css #javascript #webdev

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 :

First include this library using CDN (https://unpkg.com/swup@latest/dist/swup.min.js).
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")
Enable swup using JS :-
(only single line of javascript is needed)
const swup = new Swup();
animate main using CSS with class identifier :-
.transition-fade {
transition: 0.4s;
opacity: 1;
}