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

  • @frontendfyi
    @frontendfyi Жыл бұрын

    Don’t forget to watch part 2 🔥 - kzread.info/dash/bejne/mG1t0LSvda-wlZM.html

  • @raymondmichael4987
    @raymondmichael498725 күн бұрын

    I can't get enough of this 😍

  • @sinamaleki3908
    @sinamaleki3908 Жыл бұрын

    thank you very much for creating this tutorial. I'm looking forward to seeing more framer-motion tutorials.

  • @sparshsharma3150
    @sparshsharma31506 ай бұрын

    Absolutely amazing content!! This channel is a gold mine. Thank you and Keep sharing❤

  • @vladbalan5513
    @vladbalan55139 ай бұрын

    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

    @frontendfyi

    9 ай бұрын

    Thank you so much! Appreciate it!

  • @hamadbakeel1951
    @hamadbakeel1951 Жыл бұрын

    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

    @frontendfyi

    Жыл бұрын

    Thank you so much! Appreciate your kind words!

  • @WellDMLT
    @WellDMLT10 ай бұрын

    I loved this video! Thank you so much for shared!

  • @salmansadi9842
    @salmansadi984210 ай бұрын

    Nice one. I will wait for some more critical frontend challenges from you. Thanks for teaching us.

  • @ryandutty
    @ryandutty Жыл бұрын

    Great Content! Really enjoy your easy-to-follow methods. Keep up the great work😀!

  • @frontendfyi

    @frontendfyi

    Жыл бұрын

    Thanks!!

  • @kevinat71
    @kevinat71 Жыл бұрын

    thanks, like the way you explain everything... keep going bro!

  • @kamill34
    @kamill34 Жыл бұрын

    great work ! cant wait for more animation 🔥

  • @frontendfyi

    @frontendfyi

    Жыл бұрын

    Tomorrow part 2! That has even MORE animation 🔥

  • @prashlovessamosa
    @prashlovessamosa Жыл бұрын

    Thanks for making this

  • @mihao-runs
    @mihao-runs2 ай бұрын

    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.👋

  • @jlogo80
    @jlogo80 Жыл бұрын

    Really good videos and well explained, thanks for your work!

  • @frontendfyi

    @frontendfyi

    Жыл бұрын

    Thanks for your compliment! I appreciate it!

  • @ereburg
    @ereburg Жыл бұрын

    Thank you for your FM lessons! Keep it up!💪🏻

  • @frontendfyi

    @frontendfyi

    Жыл бұрын

    Thanks!

  • @Arville27
    @Arville27 Жыл бұрын

    Thanks, I really appreciate your effort to explain every step! Subscribed

  • @frontendfyi

    @frontendfyi

    Жыл бұрын

    Thank you so much!

  • @KAMIL-jc8nn
    @KAMIL-jc8nn6 ай бұрын

    Wow great tutorial. You got new subscriber

  • @ulugbekatakhanov1431
    @ulugbekatakhanov1431 Жыл бұрын

    Great work

  • @marceloherlan8552
    @marceloherlan8552 Жыл бұрын

    Men, This is another level! gracias

  • @frontendfyi

    @frontendfyi

    Жыл бұрын

    Thank you so much! 🙏

  • @joevingracien
    @joevingracien Жыл бұрын

    Incredibly insightful 🤟

  • @frontendfyi

    @frontendfyi

    Жыл бұрын

    Thanks! 😁

  • @rahul-ti9cm
    @rahul-ti9cm5 ай бұрын

    amazing

  • @brayancuenca6925
    @brayancuenca6925 Жыл бұрын

    the sip of water had me 😂. Great content!

  • @frontendfyi

    @frontendfyi

    Жыл бұрын

    Hahaha thanks ❤️

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r11 ай бұрын

    thanks foe videos

  • @juberpadyar8850
    @juberpadyar8850 Жыл бұрын

    I am waiting for your next videos on framer motion 🎉

  • @honefone
    @honefone Жыл бұрын

    so glad I stumbled upon this vid, I was asking chatGPT earlier today about how to do the active feature text scroll thing

  • @frontendfyi

    @frontendfyi

    Жыл бұрын

    Love it! Hahaha. Glad it was helpful to you!

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r11 ай бұрын

    i love it animation

  • @mrag792
    @mrag79210 ай бұрын

    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

    @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

  • @kumardeepanshu8503
    @kumardeepanshu85039 ай бұрын

    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

    @frontendfyi

    9 ай бұрын

    Thanks! ❤️ And great suggestion, I will definitely add it to my list of videos to make 😁

  • @nayburz
    @nayburz8 ай бұрын

    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 .

  • @sudsierspace9010
    @sudsierspace9010 Жыл бұрын

    Wow this is need to call good content

  • @WellDMLT
    @WellDMLT5 ай бұрын

    One doubt, is this an extension that you use to organize the properties of the classname?

  • @frontendfyi

    @frontendfyi

    5 ай бұрын

    Yes it is. It is a prettier plugin maintained by the tailwind team: tailwindcss.com/blog/automatic-class-sorting-with-prettier

  • @WellDMLT

    @WellDMLT

    5 ай бұрын

    Thank you so much 😊

  • @frontendfyi

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

  • @RedVelocityTV
    @RedVelocityTV Жыл бұрын

    Frontendfyi? More like frontendsensei!

  • @frontendfyi

    @frontendfyi

    Жыл бұрын

    Huge compliment!! Thanks 🙏

  • @ahmadferdiansyahramadhani8573

    @ahmadferdiansyahramadhani8573

    11 ай бұрын

    indeed!!!

  • @mashoodmemon6987
    @mashoodmemon69877 ай бұрын

    Did you used react???

  • @frontendfyi

    @frontendfyi

    7 ай бұрын

    Absolutely! Link to the code is in the description

  • @Papahaha
    @Papahaha Жыл бұрын

    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

    @frontendfyi

    Жыл бұрын

    Thanks for the feedback! Appreciate it 🙏

  • @greendsnow
    @greendsnow Жыл бұрын

    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

    @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

    @RishiKasyap

    Жыл бұрын

    Same here but i think my problem is caused by prettier, disabled format on save as a temporary solution

Келесі