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 “...
--------------------------------------------------------------
Смотрите видео This animation is not as complicated as it looks! онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code Sketched 30 Январь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,45 раз и оно понравилось 4 людям.