DEV Community

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

Posted on • Edited on

7 5

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (2)

Collapse
 
manishfoodtechs profile image
manish srivastava

Naman very nice 👌👌👌👌

Collapse
 
namanvyas profile image
Naman vyas

Thanks manish :)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay