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
