building in framer & chill (educational material)

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.

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:

[Shahzaib_web]

STAGGERED all the way to the finish line!!

[templaterguy]

I watch almost all of your videos.

I have a point about this video :
You could have added a component for each letter wrapper to create a text variable for each letter.

This would have saved you a lot of time creating & adding the effect to each letter.

But, an awesome video as always, Nandi.

[zachhtet]

I was just watching your video on the 3D Framer Crash Course, and wondering when you are going to upload.

[nbodyhd]

Great video! Just a quick question, what microphone are you using?

[Vanqich]

Hello man ! I much appreciate your content but can you please focus on more on the framer structuring aspect ? I like the way you teach & I'd love it if you show us more on how to build certain landing pages & complicated functionalities

[kentokun]

Hey! I've been loving framer university and was wondering if they were free to use in projects? Also your educational content is very insightful

[cutoff-v]

Bro can u explain how we deliver the framer site to the client ?