Floating Card Animations with CSS and Framer Motion
In this video, we're creating a floating 3D card with rotation animations and a light sheen effect, inspired by the profile card in Arc.
💾 Starter code: https://github.com/Built-With-Code/3d-member-card/tree/starter
⏭️ Watch This Next: https://www.youtube.com/watch?v=nPsJfTVjkdo&list=PLdFJxFw1qVTiG_KgnX02p-taYdpKg9lOP
📱 Follow online: https://twitter.com/built_with_code
Have a question about anything in this video? Drop it in the comments!
⏰ Timecodes ⏰
0:00 - Intro + Preview
0:11 - Starter code
0:27 - 3D rotation on hover
6:18 - Smoothing animations with springs
6:52 - Scale animation
8:43 - Light seen effect
13:42 - Outro
-------------------------------
Welcome to Built With Code, a channel focused on intermediate/advanced frontend web development topics. Some of my favorite tools are Next.js, TailwindCSS, and Framer Motion. If you find value from the videos, a like and/or subscribe is much appreciated!
Видео Floating Card Animations with CSS and Framer Motion канала Built With Code
💾 Starter code: https://github.com/Built-With-Code/3d-member-card/tree/starter
⏭️ Watch This Next: https://www.youtube.com/watch?v=nPsJfTVjkdo&list=PLdFJxFw1qVTiG_KgnX02p-taYdpKg9lOP
📱 Follow online: https://twitter.com/built_with_code
Have a question about anything in this video? Drop it in the comments!
⏰ Timecodes ⏰
0:00 - Intro + Preview
0:11 - Starter code
0:27 - 3D rotation on hover
6:18 - Smoothing animations with springs
6:52 - Scale animation
8:43 - Light seen effect
13:42 - Outro
-------------------------------
Welcome to Built With Code, a channel focused on intermediate/advanced frontend web development topics. Some of my favorite tools are Next.js, TailwindCSS, and Framer Motion. If you find value from the videos, a like and/or subscribe is much appreciated!
Видео Floating Card Animations with CSS and Framer Motion канала Built With Code
Built With Code Coding javascript nextjs next js tutorial html css next.js TailwindCSS tailwind css react tailwind css tailwind typescript website coding framer motion framer motion usespring spring animation rotation animation 3d rotation 3d css scale animation framer motion rotation framer motion scale hover effect light sheen css radial gradient framer motion jump arc browser member card profile card 3d card animation card rotate floating card
Комментарии отсутствуют
Информация о видео
26 августа 2024 г. 18:00:05
00:13:53
Другие видео канала
