Interactivity in Hana

Interactivity in Hana is built from three things, and no code:

States — alternative versions of an object. A button's hover look, a panel's open position, a card's lifted shadow.
Events — what triggers a change. A click, a hover, a key, the moment the scene loads.
Actions — what happens when an event fires. Usually a transition to a state, but also opening a link, showing an object, or playing a video.

Author them on the object itself, and Hana animates between the states for you — you never keyframe a property.

The workflow

Select an object and open the States panel. It always has a Base State: the object as designed.
Add a state and give it a name (Hover, Open, Active). With that state selected, change the object — move it, restyle it, resize it. Those changes belong to that state; the Base State is untouched.
Open the Events panel and add an event.
Give the event a Transition action pointing at the state you made.
Press Play to try it.

States can be renamed, duplicated and deleted as the design evolves, so it's normal to build a hover state by duplicating one you already like.

Events

Event	Fires when
Start	The scene loads — for entrance animations and anything that should already be moving
Mouse Down	The pointer is pressed
Mouse Up	The pointer is released
Mouse Press	A press-and-release, the usual "click" — reverts on release
Mouse Hover	The pointer enters the object, and reverses when it leaves
Key Down / Key Up / Key Press	A keyboard key is pressed, released, or both
Look At	Turns the object toward the pointer
Follow	Makes the object follow the pointer

Mouse events work with touch on mobile devices too.

Object or canvas

A mouse event can listen on the object itself or on the whole canvas — the difference between a button reacting to its own click and a scene reacting to a click anywhere.

Passthrough

The icon next to the Events label toggles passthrough, which decides what happens when objects overlap:

On — the event triggers on every object under the pointer, so a click on a stacked button activates both.
Off — only the topmost object responds.

Useful for layered and nested interactions where a parent frame and its children both carry events.

These two are continuous rather than one-shot, and have their own controls: a damping factor for how loosely the object trails the pointer, a distance limit so it stops at a boundary, whether it resets when the pointer leaves and how fast it returns, and which axis it's allowed to move or turn on. They're what you use for cursor-tracking eyes, parallax elements and magnetic buttons.

Actions

Action	What it does
Transition	Animates the object to one or more states — the action you'll use most
Show	Shows or hides an object, with an option to toggle
Link	Opens a URL, in a new tab or the same one
Video	Controls a video — play, pause, volume, looping
Animation	Plays an animation clip from an imported 3D model

One event can carry several actions, so a single click can transition a panel, hide a button and open a link.

Transitions

A transition is where the motion is shaped:

Duration — how long the change takes.
Easing — the curve. Alongside the familiar linear and ease in / out / in-out, Hana has spring physics (mass, stiffness, damping and initial velocity) for motion that settles naturally, and custom bezier curves when you want an exact shape.
Delay — wait before starting, which is how you stagger several objects into a sequence.
Repeat and direction — run a transition a number of times, or bounce it back and forth for a looping pulse.

A transition can hold several states in sequence, so one event can walk an object through a multi-step move without extra events.

Run mode

Mode	Behavior
Once	Plays through and stays there
Repeat	Loops
Toggle	Alternates between the state and where it came from on each trigger — how a switch, accordion or menu button works

What can be animated

Animates	Doesn't animate
Position, rotation, size	Padding, gap and layout direction
Fill and stroke — color and opacity
Effects
Custom shape edits, including booleans
Vector and vector-network point positions
3D projections

Two caveats worth knowing before you build:

Vector transitions need matching point counts. A vector can only tween to a state with the same number of points.
Layout properties are excluded. A state can't change a frame's padding, gap or direction. If you want something to visibly grow or shrink, animate its width, height or scale instead — see Auto Layout & Constraints.

Where to go next

Effects in Hana, 3D Shapes in Hana, Exporting in Hana, AI Agent in Hana