New
New
New
Guide
- 2D
- Animations
Guide
- 2D
- Animations
Guide
- 2D
- Animations
How to Spice Up Framer Sites with 2D Animations
In this Framer blog, I'm revealing a secret weapon for leveling up your sites: Hana. You'll learn how to create and embed stunning interactive animations that take your Framer projects from good to extraordinary. If you're looking to add that extra wow factor to your sites, this tool is exactly what you've been waiting for.
Posted by
Nandi
Table of contents
What is HANA?
HANA is a 2D animation tool made by the same team behind Spline, the well-known 3D design tool. But while Spline focuses on complex 3D scenes, HANA is lightweight, super intuitive, and built for clean 2D effects, perfect for web interactions.
And here’s the fun part: HANA animations can be embedded directly into Framer with just a simple link. That means no exporting videos, no hacking code. Just pure visual delight.
What is HANA?
HANA is a 2D animation tool made by the same team behind Spline, the well-known 3D design tool. But while Spline focuses on complex 3D scenes, HANA is lightweight, super intuitive, and built for clean 2D effects, perfect for web interactions.
And here’s the fun part: HANA animations can be embedded directly into Framer with just a simple link. That means no exporting videos, no hacking code. Just pure visual delight.
What is HANA?
HANA is a 2D animation tool made by the same team behind Spline, the well-known 3D design tool. But while Spline focuses on complex 3D scenes, HANA is lightweight, super intuitive, and built for clean 2D effects, perfect for web interactions.
And here’s the fun part: HANA animations can be embedded directly into Framer with just a simple link. That means no exporting videos, no hacking code. Just pure visual delight.
HANA animation.
HANA animation.
HANA animation.
Why HANA is so cool
When you browse HANA’s community library, you’ll find a bunch of prebuilt animations — from cursor-following arrows to blur effects to highlight text interactions.
The one shown in the tutorial is a slick text reveal effect that highlights specific words as your cursor moves around the screen. It looks complex, but it’s made using a super clever “window” trick.
How the window effect works
Here’s the concept:
You write a block of text.
You place a shape below the text with a colored background.
Then, using boolean modifiers, you subtract the text from a top shape, creating transparent “windows” in the shape of the letters.
Now, when you place a colored rectangle or gradient below it, the color only shows through the text.
It’s a smart design illusion, and it looks stunning when animated.
Adding animation with cursor interactions
Once you’ve built your visual layers (solid fill, gradient fill, and outline) HANA lets you add simple interactions that make them move with your cursor.
Here’s how:
Select the layers (solid, gradient, outline).
Add a “Follow” interaction from the Events panel.
Tweak the damping and hover-out speed.
Preview and you’ve got a smooth, interactive effect.
You can even layer gradients for depth or use radial fades for a softer look.
Embedding into Framer
Now for the magic moment.
Once your animation is ready, HANA gives you an embed link. Just head over to your Framer project and:
Open the Insert panel and search for “Embed.”
Drag the Embed component onto your canvas.
Paste in the HANA link.
Pin and position it however you like.
Why HANA is so cool
When you browse HANA’s community library, you’ll find a bunch of prebuilt animations — from cursor-following arrows to blur effects to highlight text interactions.
The one shown in the tutorial is a slick text reveal effect that highlights specific words as your cursor moves around the screen. It looks complex, but it’s made using a super clever “window” trick.
How the window effect works
Here’s the concept:
You write a block of text.
You place a shape below the text with a colored background.
Then, using boolean modifiers, you subtract the text from a top shape, creating transparent “windows” in the shape of the letters.
Now, when you place a colored rectangle or gradient below it, the color only shows through the text.
It’s a smart design illusion, and it looks stunning when animated.
Adding animation with cursor interactions
Once you’ve built your visual layers (solid fill, gradient fill, and outline) HANA lets you add simple interactions that make them move with your cursor.
Here’s how:
Select the layers (solid, gradient, outline).
Add a “Follow” interaction from the Events panel.
Tweak the damping and hover-out speed.
Preview and you’ve got a smooth, interactive effect.
You can even layer gradients for depth or use radial fades for a softer look.
Embedding into Framer
Now for the magic moment.
Once your animation is ready, HANA gives you an embed link. Just head over to your Framer project and:
Open the Insert panel and search for “Embed.”
Drag the Embed component onto your canvas.
Paste in the HANA link.
Pin and position it however you like.
Why HANA is so cool
When you browse HANA’s community library, you’ll find a bunch of prebuilt animations — from cursor-following arrows to blur effects to highlight text interactions.
The one shown in the tutorial is a slick text reveal effect that highlights specific words as your cursor moves around the screen. It looks complex, but it’s made using a super clever “window” trick.
How the window effect works
Here’s the concept:
You write a block of text.
You place a shape below the text with a colored background.
Then, using boolean modifiers, you subtract the text from a top shape, creating transparent “windows” in the shape of the letters.
Now, when you place a colored rectangle or gradient below it, the color only shows through the text.
It’s a smart design illusion, and it looks stunning when animated.
Adding animation with cursor interactions
Once you’ve built your visual layers (solid fill, gradient fill, and outline) HANA lets you add simple interactions that make them move with your cursor.
Here’s how:
Select the layers (solid, gradient, outline).
Add a “Follow” interaction from the Events panel.
Tweak the damping and hover-out speed.
Preview and you’ve got a smooth, interactive effect.
You can even layer gradients for depth or use radial fades for a softer look.
Embedding into Framer
Now for the magic moment.
Once your animation is ready, HANA gives you an embed link. Just head over to your Framer project and:
Open the Insert panel and search for “Embed.”
Drag the Embed component onto your canvas.
Paste in the HANA link.
Pin and position it however you like.
Embedding animation into Framer.
Embedding animation into Framer.
Embedding animation into Framer.
That’s it. Your interactive animation is now live on your site, and it works perfectly, just like in the preview.
Wrapping up
HANA is a gem. Whether you want to spice up a hero section, guide user attention, or just show off some creative flair, it gives you full control over 2D animations, and integrates seamlessly with Framer.
That’s it. Your interactive animation is now live on your site, and it works perfectly, just like in the preview.
Wrapping up
HANA is a gem. Whether you want to spice up a hero section, guide user attention, or just show off some creative flair, it gives you full control over 2D animations, and integrates seamlessly with Framer.
That’s it. Your interactive animation is now live on your site, and it works perfectly, just like in the preview.
Wrapping up
HANA is a gem. Whether you want to spice up a hero section, guide user attention, or just show off some creative flair, it gives you full control over 2D animations, and integrates seamlessly with Framer.
