Recreating the Awesome Amie.so Animations With Framer Motion - part 1/2 скачать в хорошем качестве

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: https://www.frontend.fyi/v/recreating... 💬 Join us on Discord: https://www.frontend.fyi/discord 🐦 Follow me on Twitter:   / jeroenreumkens   &   / frontend_fyi   👨‍🏫 Check my mentorships: https://www.jeroenreumkens.nl/mentoring #framermotion #animations #html #css #tailwind #frontend