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!
2 หลายเดือนก่อน
Awesome, that will be so great! Keep up the grind! We will wait patiently for the Next.js version thx!
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.
1. You can tweak the offset by giving a negative margin using media queries pretty easily (similar to how I have done it inside css part of the video) 2. I don’t see that at all, maybe your version of code has a timing related issue. I’m not able to reproduce it on my version. Thanks
@@codegrid I figured it out, Instead of setting visible properties, I used opacity. And I think I set the flex basis to 25% for each box. Fixed it right up.
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. 😉
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.
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.
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.
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.
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!
Definitely going to be trying some variations based on this on my next project. Great work as always chief
🙌🏼
bro what's VS Code theme u r using?
Sequoia
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.
1. You can tweak the offset by giving a negative margin using media queries pretty easily (similar to how I have done it inside css part of the video)
2. I don’t see that at all, maybe your version of code has a timing related issue. I’m not able to reproduce it on my version.
Thanks
@@codegrid I figured it out, Instead of setting visible properties, I used opacity.
And I think I set the flex basis to 25% for each box.
Fixed it right up.
Can you please explain, why you use
stagger: {
grid: [2,5],
axis: 'x'
}
options inside the animateTransition function
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. 😉
great work😍
Thanks!
Good work i love it
Thanks!
What's the vs theme btw?
Sequoia
Legend ❤
No way 😄🙏🏽
why gsap don't work with barba?
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.
I love you man
🙏🏽
What's your Vs Code Theme Name?
Sequoia
How to do that in next js
You can read the pinned comment!
W thumbnail
Thanks! 🙏🏽
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.
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.
Very gooooooood
Thanks!
Astro Framework usage 😅
✌🏼
swupjs is pretty nice barbajs alternative.
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.
Will give Swupjs a shot then! Thanks
❤
🙏🏽
Why don't you teach using TailwindCSS?
Because I HATE Tailwind. I’m personally not interested in learning/remembering classes and write tons of classes in HTML. I prefer writing CSS.
@@codegrid🫡 I felt that 🥹
@codegrid okay thanks for prompt reply