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;
}
My Project with swup JS :- https://nvnamanvyas.github.io/portfolio/
Top comments (2)
Naman very nice ππππ
Thanks manish :)