Rebuilding Apple's Crazy Scroll Animations With Framer Motion And TailwindCSS

[@oliverdeveloper]

Fantastic work. Thanks for putting all the effort into creating this.

[@frontendfyi]

Thank you so much! Also thank you for becoming a pro member, really appreciate it! 🙏

[@ride_the_wind]

Deserves way more subs

[@frontendfyi]

Thanks!! It’s only a matter of time till people realize 🔥

[@ride_the_wind]

100%@@frontendfyi

[@hideki6639]

Hi! I'm from Brazil and I discovered your channel and i'm loving the way that you teach us. Thank you so much!!

[@ajaydeepsinghrajpoot]

Finally! I was looking forward to this one, since the last time we talked on discord. More tailwind content coming?😋

[@frontendfyi]

Definitely more tailwind content coming soon! I have something veeeery interesting cooking 🤩

[@ilan117]

I wish 🙏 you could have shown us how to do that using next.js SSR components. I think many of us are trying to find solutions to framer and or gsap in next.js. Please think about it ♥️✌️

[@frontendfyi]

As with framer and nextjs app dir there’s not much more you have to do than adding use client to every component that uses framer motion. Anything specific you’re struggling with most?

[@ilan117]

@@frontendfyi Thank you! I was more talking about server components and for example applying scroll animation throughout the application e.g the application page and not just a section? Is that possible ? Thank you, again.

[@okkashaally2115]

You can't do JavaScript animations on the server. In NextJs everything is SSR expect for the components that works on client will need "use client" specified in the file otherwise it will throw an error in runtime or build time

[@sohrabkhan101]

@@ilan117 use template.js in root folder everything lies in it. For more see next js documentation.

[@guilhermecosta6731]

I just found your channel and its a complete gem. Incredible high quality content with high quality tips and insights. Thanks for being this awesome!

[@frontendfyi]

That’s what I like to hear! Thank you so much for your kind words, it makes my day!

[@DazzyDude00]

Great stuff! Should do more of these 👌

[@aheinzel]

Nice tutorial! So, for the header image, you could probably use “h-dvh” instead of “h-screen” to adjust the image height to the current browser height, depending on whether an address bar is visible or not.

[@LeticiaVieira268]

man, I love you. Your job is wonderful 🇧🇷

[@lorisyanis]

Thank you so much for such stellar content, Jeroen!

[@frontendfyi]

Thank you so much for your kind words!! Really appreciate it ❤️

[@capricorn.engineering]

Bro let's go 🔥teach us everything you know!

[@felixhoevelborn]

Hey, great content. Would you mind making a video or providing information on how you setup VSCode (extensions, etc.) like you have? Thanks, great video!

[@frontendfyi]

Great idea! Will definitely write that down in my list, thanks!

[@kokhant7068]

It’s my best decision to subscribe to your channel to learn advance frontend dev, thank you ❤

[@frontendfyi]

So kind!!! Thank you so much, really appreciate it!

[@abdelkarimelmanssouri9392]

hey Jeroen, hope you're doing good. I really love what you're building in this great channel, it's like a goldmine ❤😆. May i ask you to rebuild the carousels, and thank you for your time and your humility.

[@ota-ke]

This was a joy to watch, thank you.

[@frontendfyi]

Glad you liked it! Thanks for sharing it with me!

[@faisalabdulkadir9439]

You are so good at this man, i am trying to get good at framer motion and you are my inspo, but there isnt't enough material to learn from and the docs are trash

[@frontendfyi]

Thank you so much for your kind words! ❤️ Make sure to also check out my course if you’re looking for even more content! It’s still early stages (first modules out now), but it will explain many of the basic topics as well as have many many real world examples to learn from.

[@faisalabdulkadir9439]

@@frontendfyi thanks very much for the reply, I hope I get as good as you one day 🦾

[@frontendfyi]

Just keep going! Improve one percent each day, and a year from now you’ve already improved a LOT. I’m doing this for well over 10 years now. Take your time ❤️

[@deepak8586]

Amazing!!! appreciate your efforts for teaching us!!

[@2kceltics]

I think you've strong foundation with css and framermotion but u are overthinking every step in this project. You should use tailwind grid 12 column, a little bit of flex inside each grid column to organize each component and after that framer motion, and that's all it doesnt necessary so many tags nor react-use, with grid+flex you don't need something else. Anyway, I' ve subscribed it was a good tutorial in overall. Regards from Argentina.

[@frontendfyi]

Thanks for your comment! Would love to see how you would approach some parts! On one hand I might agree with you a bit. Perhaps in a little bit overusing custom grids indeed! So thanks again for this feedback 🙏

[@DQime]

Can anyone explain why he use a container component and not just a container class? I come from bootstrap

[@frontendfyi]

​​It's more of a habit than anything else. Tailwind's container class is actually really good and does in essence the same thing. Same could go for Bootstrap. ​​Only benefit could be if you want to add more defaults to that component, then you can easily add it to that component too and can see at a single glance what are all the things the container adds. Hope his helps!

[@ivancula]

Hey, i know its kind of a dumb question, but how do you implement an infinite carousel when the carousel has transitions on each element, I tried everything but it just doesn't work, mabye some day you could make a tutorial on that. Greetings from Macedonia

[@sohrabkhan101]

Thank you. You deserve more likes and subscribes.

[@frontendfyi]

Thank you!! They will for sure come, I just keep going!

[@ReynardNathaniel]

just to confirm, do we still need to install prettier and ESlint? or just tailwind and react alone are enough?

[@johnpaulpineda2476]

Hey! May i know what extension do you use to visualize the hex codes?

[@JasonAghedo]

Hey, love your work😍😍. What font do you use in VsCode

[@liemtran5269]

Thank you for providing valuable content to learn Tailwind CSS and kickstart a project with it. By the way, could you share which browser you use for tab switching in your videos?

[@frontendfyi]

It's called Arc: arc.net/gift/7611d3fc

[@liemtran5269]

thank you!@@frontendfyi

[@falasefemi3344]

Lovely content thanks. Love the theme of your code editor please can I know the name?

[@frontendfyi]

Thank you!! The theme is called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme

[@julienheng3880]

Amazing work! Thank you very much. btw, what font do you use in VSC for this one?

[@frontendfyi]

The theme is called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme And the font is called Recursive Mono Casual Static

[@raghavm]

Is there any particular reason that you don’t use pascal case for naming your components?

[@frontendfyi]

Mainly because PascalCase for react is a remainder stemming from when react was still written as classes. Since they dropped that, I stopped using pascalcase. But besides that it’s only a preference. It doesn’t change a thing of course.

[@pauloluguenda8397]

Your are the best, thank you very much❤

[@saviogmz1734]

Can you kindly explain the hero height variable and why is is multiplied by 2? I didn't get that

[@frontendfyi]

Good question! We kind of have 2 header rows now: The row with the logo, and then the second row with the 'apple tv+' text. They are two separate divs, because only the second element should become sticky. So therefore each row has a specific height, but the distance from the top should actually be 2 times that height because there's 2 of these elements underneath each other. Let me know if that makes sense!

[@SinaEslamian-u5z]

Hey bro how can i run project in windows?

[@eduardosantos3516]

Could you tell me the name of this browser you use?

[@frontendfyi]

It's called Arc! Really nice browser indeed!

[@michaelnamco2484]

Wonder if all this is possible with just motion one

[@frontendfyi]

Would definitely work! Although Matt Perry also advises to use Framer Motion if you use react, Motion One in any other case. You could also use Scroll Driven Animations, you could get quite far with that too I think!

[@michaelnamco2484]

A Motion one video from time to time for those of us that Don’t use React would be amazing, yes I saw that, that was slowing down on MO but still there something nice about MO, I don’t care about a few KB more, it’s something else, anyway thank u for the response

[@user-wz4yb8sd5n]

Thank you.

[@frontendfyi]

Thank YOU! 😁

[@hwapyongedouard]

damn your web site looks cool , frontend fyi

[@frontendfyi]

Thank you!

[@yaswanthg5]

Bring it on 🎉

[@frontendfyi]

Lets gooo!! Thanks for tuning in!

[@dhruvkaushik2122]

i have one question , whenever i use sticky position along with locomotive scroll and scroll peed of -0.8 it does not remains sticky anymore pls help anyone

[@frontendfyi]

Are you using overflow: hidden on any of its parents perhaps? It 'breaks' position sticky. Overflow: clip does work though!

[@dhruvkaushik2122]

no i am not ,However sticky is working as long as i am not giving data-scroll-speed to the parent section @@frontendfyi

[@anunay_sharma]

hi, I really suck at CSS. any recommendations?

[@simoncallelaverde]

Get good. Don't get bitter, get better.

[@ilmanmanarulqori5632]

awesome!

[@hameeeed5992]

Nice vidro

[@ravvikumar1216]

what doea Usps stands for.....?

[@frontendfyi]

It stands for “unique selling points”. It’s a term often used to describe the best features of a product.

[@ravvikumar1216]

@@frontendfyi thanks, and nice video

[@jheanbrizadao2429]

Hello, my friends 🎉

[@frontendfyi]

Hello friend! 🎉 Hope you’re having a good day!

[@GratuityMedia]

🎉😮

[@frontendfyi]

Is that an emoji representation of the first frame of this video? 😉

[@hrithikvishwakarma001]

Font name please

[@جوادجیتی]