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;
}

My Project with swup JS :- https://nvnamanvyas.github.io/portfolio/

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.