How to Make a Pixel Transition Effect using Next.js and Framer Motion

[@reubence_]

I've been silently consuming your content since a while. You're probably the only one doing this rn on KZbin. Don't stop!

[@olivierlarose1]

Cheers!🙏

[@verbs-otier-ru]

I love this channel! ❤❤❤ So much useful content. And you explain it perfectly. Keep it up!

[@olivierlarose1]

Thanks I appreciate it🙏

[@RB_MAFIA]

the undisputed goat of modern web dev ❤

[@berdinazarov6972]

You are amazing, your contents are priceless❤️, appreciate it

[@theriser8751]

Your channel is a gold mine bro, really appreciate the grind

[@olivierlarose1]

Thanks man means a lot🙏

[@eronsalling5536]

This is fantastic! Would love to see a continuation of this that turns it into a repeating loading-style animation.

[@game_withus]

The channel I am waiting for. 🎉🎉 Really amazing contents

[@olivierlarose1]

Cheers🙏

[@mateuspaula_dev]

Thanks for another great video buddy. Hugs from Brazil 🇧🇷

[@olivierlarose1]

Cheers from Canada💯

[@saar5947]

underrated channel for sure.

[@olivierlarose1]

Thx man! Means a lot🙏

[@imnotylerdurden]

Love all your contents. I'd also love a tutorial how to build a simple responsive portfolio like yours with next.js! All the support bro!

[@olivierlarose1]

Thanks man🙏 and sounds good I’ll see if I can make a video about that

[@taszidizaz4079]

Thanks a lot man ❤

[@olivierlarose1]

Cheers!

[@nellymotion]

Amazing Content!

[@olivierlarose1]

🙏💯

[@mshivam019]

Great content! Already subscribed, I recently made my portfolio and I am hoping to use these techniques and add some animations, Thank you!❤ I was hoping to use tailwind, would love a video tutorial with it

[@olivierlarose1]

Cheers! Glad you found the videos helpful :) And thanks for the feedback I might start using tailwind!

[@JayGanatra]

Hi Oliver, great video. Had a question regarding the vertical animation... instead of rows, why not just change the delay value from indexOfColumn+randomDelay to i+randomDelay, i being the delays.map index

[@ramin9134]

nice

[@olivierlarose1]

🙏

[@skydwlr]

thank you so much for making this. is there a name to your CSS methodology?

[@olivierlarose1]

it's simple SCSS, I don't use any specific methodology

[@itsjmendez]

Another one (DJ Khaled voice)🔥

[@olivierlarose1]

God did🔥💯

[@demicoderr]

Please we need a framer and gsap tutorial. Its quite hard to follow when the syntax for these libraries are not so familiar 🙏

[@olivierlarose1]

Like an equivalence video?

[@demicoderr]

@@olivierlarose1 what I mean is like a beginners tutorial that would go over concepts in framer motion or gsap like the syntax, how to use the properties each provide and like that. I hope you get what I mean 🤲

[@olivierlarose1]

@davidoga5173 gotcha!

[@kofiasante6128]

How would this be applied for say a page transition

[@auronphp]

just do it in a loading.jsx/js/tsx file where the page.js is located

[@olivierlarose1]

I’ll make a video soon with the page router from next.js. However it wouldn’t be possible (without hacking it) with the app router

[@ekchills6948]

great video! please can you do page transition animation with framer motion with next js video pleasee

[@olivierlarose1]

I'm waiting for an official solution for the App router. Would you still be interested in a video about page transitions for the Page router?

[@ekchills6948]

@@olivierlarose1 I've implemented it with pages but I can't seem to get it to work on this app router. Thanks for being considerate. I'll wait for your video when there is a better solution (:

[@aleksimodebadze1603]

getting window is undefined error

[@GameDevForLife]

Bro is really a good vidéo But i follow your step but in the end Not the same result and not only in this video i dont know why

[@olivierlarose1]

Check out the written version of the tutorial it might help you out: blog.olivierlarose.com/tutorials/pixel-transition

[@fiha_khair_yt]

Brother please upload this video 3D perspective Scroll or upload the source code😅

[@olivierlarose1]

It’s going to be exclusively available in my upcoming course, check it out here: blog.olivierlarose.com/courses/web-animation-course

[@fiha_khair_yt]

waiting eagerly@@olivierlarose1

[@olivierlarose1]

Soon💯