The Only Page Transition Hack You Need for HTML Pages

Inspiration ▸ Awwwards Element from Jordan Gilroy

Music from Epidemic Sound.
Thanks for watching!

[codegrid]

I know many of you would be looking for such page transition in Next.js using the App Router. Just FYI - I'll be creating a video on that too once I have a reliable solution working.

One more thing: I misspoke in the video when I said 'latest version' - I meant the 'last/current version'. It works smoothly when you have minimal to no JavaScript running on the updated page. But I noticed several issues reported where JavaScript wasn't executing correctly after page transitions. The little patch demonstrated in the video should fix that issue. Thanks!

[mcrwebdev]

Definitely going to be trying some variations based on this on my next project. Great work as always chief

[_imiv]

bro what's VS Code theme u r using?

[labheshgupta]

make a vid on how to set up vs like yours, the theme, icon set and everything

[scottonanski]

There's a couple bugs in this;

At ultrawide resolutions, between the 2/3 3/4 blocks there's a small white gap.

And the from page to page, there's a quick flash that's almost like a stutter.

[frontend-css-simplified]

Can you please explain, why you use
stagger: {
grid: [2, 5],
axis: 'x'
}
options inside the animateTransition function

[Realharshagarwal]

Brother you know this much why not just make a tutorial for completely fully ui and ux based portfolio with all animations and transitions in nextjs everyone would love that....btw love from India.

[dracula]

swupjs is pretty nice barbajs alternative.

[Fullstackdesigners]

Why don't you teach using TailwindCSS?