building in framer & chill (educational material)
✔︎ Framer University: https://frameruni.link/yt
✔︎ Create a free Framer account: https://framer.university/free-account
In this Framer tutorial, you'll learn how to recreate a stunning staggered text hover effect without writing any code. I'll guide you through the process of building a complex animation using components, variants, and custom transitions. You'll discover how to structure layers for 3D transforms, create seamless letter transitions, and implement a staggered animation effect.
→ Remix the tutorial project: https://framer.university/resources/s...
→ 3D Transforms Crash Course: https://framer.university/lessons/fra...
→ Original interaction by Rauno: https://x.com/raunofreiberg/status/18...
00:00 - Introduction
00:41 - Analyzing the effect
2:16 - Creating the structure for each letter
22:22 - Preparing a component
25:08 - Defining the hover state as a variant
35:26 - Adding the staggered animation
47:27 - Final interaction & customization
50:21 - Additional resources
Follow me on:
X: / learnframer
Instagram: / framer.university
Watch video building in framer & chill (educational material) online without registration, duration hours minute second in high quality. This video was added by user Framer University 18 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,473 once and liked it 182 people.