Watch and track your favorite playlist.
Curated by: Code Sketched (96 videos)
In this video, we dig into a component from the Aceternity UI page that replicates the effect on this animation on the Google gemini page. We recreate this using Next.js, Tailwind and Framer motion. Here'e the link to the GitHub repo: https://github.com/kokanek/framer-animations Here's the link to the Aceternity UI page: https://ui.aceternity.com/components/google-gemini-effect Chapters in this video: 0:00 - Intro 0:43 - Demo 1:56 - Creating the project from scratch 3:02 - Concept 1: Positioning (sticky & absolute) 5:44 - Concept 2: SVGs with path and motion.path 7:10 - Concept 3: useScroll (Framer motion) 7:51 - Concept 4: useTransform (Framer motion) 9:20 - Summary If you liked this video, check out my whole React playlist here: https://www.youtube.com/playlist?list=PLTkAV9HwDLLDrT32MxxSeBDLWD4okCiVI If you like hand-drawn illustrations and 2-3 frontend dev resources every week for free, then sign up for the FREE CodeSketched newsletter: https://codesketched.substack.com/ Codesketched site: https://www.codesketched.com/ More info about me: https://www.kapeelkokane.com/ Background music used in this video 👇🏾 -------------------------------------------------------------- ♪ Onion (Prod. by Lukrembo) Link : https://www.youtube.com/watch?v=KGQNrzqrGqw --------------------------------------------------------------