The Only Page Transition Hack You Need for HTML Pages

[@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!

Awesome, that will be so great! Keep up the grind! We will wait patiently for the Next.js version thx!

[@petenicholson3255]

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

[@codegrid]

🙌🏼

[@_imiv]

bro what's VS Code theme u r using?

[@codegrid]

Sequoia

[@userj-s2000]

I love you man

[@codegrid]

🙏🏽

[@MustaPha-s4i]

Good work i love it

[@codegrid]

Thanks!

[@frontend-css-simplified]

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

[@codegrid]

The grid: [2, 5] tells GSAP to treat the blocks as a 2x5 grid, making blocks in the same column animate together. Without it, GSAP will animate all blocks of the first row before starting the second row. You can remove axis property but it is there to just ensure the animation moves horizontally, but not required in this case since the grid setting already handles the correct stagger order I guess. 😉

[@TheStRaX_]

What's the vs theme btw?

[@codegrid]

Sequoia

[@zaidgaming1881]

great work😍

[@codegrid]

Thanks!

[@yazidmuhammad2841]

Legend ❤

[@codegrid]

No way 😄🙏🏽

[@MACH_SDQ]

Very gooooooood

[@codegrid]

Thanks!

[@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.

[@codegrid]

I have mentioned multiple times why I don’t create everything using React/Next. The short answer is, I don’t want to make the source code framework-specific just so people who use other frameworks/libraries or none, can also leverage it.

[@TheStRaX_]

W thumbnail

[@codegrid]

Thanks! 🙏🏽

[@m_anees_c]

❤

[@codegrid]

🙏🏽

[@Ani5e]

What's your Vs Code Theme Name?

[@codegrid]

Sequoia

[@АртемТитов-з4о]

why gsap don't work with barba?

[@codegrid]

I guess only the core team would know the actual reason, but I encountered issues with both GSAP and ScrollTrigger after the transitions. I spent several hours troubleshooting and reviewing community threads, but even their suggested solutions, which seemed straightforward, didn't fix the issues in my implementation. Given that, I decided to remove Barba.js entirely from the project.

[@devgauravjatt]

Astro Framework usage 😅

[@codegrid]

✌🏼

[@dracula5752]

swupjs is pretty nice barbajs alternative.

[@dominotrix]

I tried both to implement with WordPress and BarbaJS is far more reliable and provides great tools to make custom animations and other code that triggers on transition.

[@codegrid]

Will give Swupjs a shot then! Thanks

[@AkashSingh-hs5sg]

How to do that in next js

[@codegrid]

You can read the pinned comment!

[@SimranQueen73]

Sir can you please add hindi audio track..for better understanding Edit: my english is still very weak Please don't hate me 🙏

[@Fullstackdesigners]

Why don't you teach using TailwindCSS?

[@codegrid]

Because I HATE Tailwind. I’m personally not interested in learning/remembering classes and write tons of classes in HTML. I prefer writing CSS.

[@Tay74514]

@@codegrid🫡 I felt that 🥹

[@Fullstackdesigners]

@codegrid okay thanks for prompt reply