Recreating the Awesome Amie.so Animations With Framer Motion - part 1/2
Ғылым және технология
Both Amie's website as well as their product are full of awesome animations and details.
Details that are inspiring to many. The web would be so much more fun if we had more people who could make such animations.
That's exactly the reason we'll be diving into a few of these animations today - to teach you how to recreate these yourself!
We'll be exploring multiple Framer Motion features, such as the useInView hook, the animation sequences and layout animations.
👀 Timestamps
00:00 - Intro
00:14 - What we'll be building
01:21 - Start building
01:53 - Add two column layout
02:40 - Add feature titles and style them
04:15 - Add feature card components and make them sticky
10:01 - Highlight active feature title on scroll with useScroll
14:35 - Styling the card components
22:43 - Fade in the right card when the title becomes active
31:52 - Fade out all cards when no title is active
33:04 - End result
33:36 - Outro
🔗 Live playground and code: www.frontend.fyi/v/recreating...
💬 Join us on Discord: www.frontend.fyi/discord
🐦 Follow me on Twitter: / jeroenreumkens & / frontend_fyi
👨🏫 Check my mentorships: www.jeroenreumkens.nl/mentoring
#framermotion #animations #html #css #tailwind #frontend
Пікірлер: 58
Don’t forget to watch part 2 🔥 - kzread.info/dash/bejne/mG1t0LSvda-wlZM.html
I can't get enough of this 😍
thank you very much for creating this tutorial. I'm looking forward to seeing more framer-motion tutorials.
Absolutely amazing content!! This channel is a gold mine. Thank you and Keep sharing❤
Absolutely amazing as always! Thank you so much. You've got the best pace and way of explaining things. Also love your stack choices! Keep it up
@frontendfyi
9 ай бұрын
Thank you so much! Appreciate it!
Thank you so much for creating this tutorial, I really love your teaching skill, informative and straight to the point. I'm looking forward for more framer-motion tutorials.
@frontendfyi
Жыл бұрын
Thank you so much! Appreciate your kind words!
I loved this video! Thank you so much for shared!
Nice one. I will wait for some more critical frontend challenges from you. Thanks for teaching us.
Great Content! Really enjoy your easy-to-follow methods. Keep up the great work😀!
@frontendfyi
Жыл бұрын
Thanks!!
thanks, like the way you explain everything... keep going bro!
great work ! cant wait for more animation 🔥
@frontendfyi
Жыл бұрын
Tomorrow part 2! That has even MORE animation 🔥
Thanks for making this
thanks! instead of using tailwind h-full w-full you can use size-full. i also love to use JaleXHolguin's tailwind plugin "tailwindcss-grid-areas" instead of using position absolute to stack divs.👋
Really good videos and well explained, thanks for your work!
@frontendfyi
Жыл бұрын
Thanks for your compliment! I appreciate it!
Thank you for your FM lessons! Keep it up!💪🏻
@frontendfyi
Жыл бұрын
Thanks!
Thanks, I really appreciate your effort to explain every step! Subscribed
@frontendfyi
Жыл бұрын
Thank you so much!
Wow great tutorial. You got new subscriber
Great work
Men, This is another level! gracias
@frontendfyi
Жыл бұрын
Thank you so much! 🙏
Incredibly insightful 🤟
@frontendfyi
Жыл бұрын
Thanks! 😁
amazing
the sip of water had me 😂. Great content!
@frontendfyi
Жыл бұрын
Hahaha thanks ❤️
thanks foe videos
I am waiting for your next videos on framer motion 🎉
so glad I stumbled upon this vid, I was asking chatGPT earlier today about how to do the active feature text scroll thing
@frontendfyi
Жыл бұрын
Love it! Hahaha. Glad it was helpful to you!
i love it animation
Thank you very much for this tutorial! In which part of the site did you import the fonts itself (so the tailwind config is able to see them)?
@frontendfyi
9 ай бұрын
It's done in two places. First I load the CSS file from Google fonts here: github.com/frontendfyi/amie-so-animation-with-framer-motion/blob/main/index.html#L10 Then I add it to the config here: github.com/frontendfyi/amie-so-animation-with-framer-motion/blob/main/tailwind.config.js#L7
i really like your website , and the playground which you have added, in it , how you have build that payground , can you create a video on that
@frontendfyi
9 ай бұрын
Thanks! ❤️ And great suggestion, I will definitely add it to my list of videos to make 😁
Anyone have any idea how I can add more text underneath the titles? I try to add a and I get the error: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching in .
Wow this is need to call good content
One doubt, is this an extension that you use to organize the properties of the classname?
@frontendfyi
5 ай бұрын
Yes it is. It is a prettier plugin maintained by the tailwind team: tailwindcss.com/blog/automatic-class-sorting-with-prettier
@WellDMLT
5 ай бұрын
Thank you so much 😊
@frontendfyi
5 ай бұрын
You are welcome! At first you might get slightly annoyed while using it, but I promise you it's worth the effort using it!
Frontendfyi? More like frontendsensei!
@frontendfyi
Жыл бұрын
Huge compliment!! Thanks 🙏
@ahmadferdiansyahramadhani8573
11 ай бұрын
indeed!!!
Did you used react???
@frontendfyi
7 ай бұрын
Absolutely! Link to the code is in the description
Kind of cool and code is even super clean. Clearly you're a good developer and designer but slow it down a lil for us smooth brains
@frontendfyi
Жыл бұрын
Thanks for the feedback! Appreciate it 🙏
My 20GB RAM i7 computer can't handle a large Next js project and this is the problem of React and Framer Motion. It takes 10 seconds to update anything. I'm sick and tired of everything React.
@frontendfyi
Жыл бұрын
Wow really? That’s crazy! Definitely shouldn’t be the case 🤯 it only happens when using framer motion then I guess? Or is it actually a nextjs thing? Would be curious to know if there’s an existing issue on any of their GitHub issues, because this definitely shouldn’t be the case!
@RishiKasyap
Жыл бұрын
Same here but i think my problem is caused by prettier, disabled format on save as a temporary solution