DEV Community

Cover image for Website page transition with CSS

Website page transition with CSS

namanvyas profile image Naman vyas ・1 min read

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

After some time of research and google I found a library called swup.js . It use CSS transition instead of JavaScript and this library is easy to use.

How to Use :

  1. First include this library using CDN.
  2. wrap all code into a main tag and give it a id of swap and class of any name id="swup" class="transition-fade"
  3. Enable swup using JS :- 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

Discussion (2)

Editor guide
manishfoodtechs profile image
manish srivastava

Naman very nice 👌👌👌👌

namanvyas profile image
Naman vyas Author

Thanks manish :)