This animation is not as complicated as it looks!
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-ani...
Here's the link to the Aceternity UI page:
https://ui.aceternity.com/components/...
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:
• React concepts illustrated
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 : • (no copyright music) lofi type beat “...
--------------------------------------------------------------
Watch video This animation is not as complicated as it looks! online without registration, duration hours minute second in high quality. This video was added by user Code Sketched 30 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,45 once and liked it 4 people.