Pages that react when people touch them
Give any layer a hover, pressed or focus look, an entrance as it scrolls into view, or a different style once the page has scrolled. No code, and it stays fast on a cheap phone.
Book the rooftop table
Order nowState · Hover, lift 2 px
State · Pressed, scale 96%
Motion · As it comes into view, 600 ms
In short
Any layer can carry states (Hover, Pressed, Focus, In view, Page scrolled) and motion that plays the first time it appears or as it travels across the screen. States are compiled to plain CSS, so the storefront needs no animation script to run them.
The problem it solves
A page that never responds to a tap feels broken, and hand written animation code is the first thing that makes a store slow on the phones most customers use.
How it works
4 steps, start to finish
-
1
Select a layer
A button, a card, a whole frame: anything on the canvas.
-
2
Add a state
In Behaviours choose Hover, Pressed, Focus, In view or Page scrolled and change what should differ.
-
3
Add motion
Pick when it plays, such as The first time it appears or While it travels up the screen, then set duration and easing.
-
4
Play it
Press Shift P to preview the page the way a visitor sees it.
In detail
What states & animation does for you
-
Five states
Hover, Pressed, Focus, In view and Page scrolled on any layer.
-
Scroll moments
The first time it appears, as it comes into view, while it travels up the screen, as it leaves.
-
Easing and spring
Linear, ease in, ease out, ease in-out, or a spring with stiffness and damping.
-
Compiled to CSS
States become plain CSS rules, so there is nothing extra to download to run them.
-
Actions
Open, close or toggle a popup, scroll to a section, show or hide a layer, on a click or on scroll.
-
States compile to plain CSS and scroll motion runs only where you used it, so a page without motion carries none of it.
-
Yes. Each component variant can have hover and pressed states with its own transition.
-
Yes. Preview (Shift P) plays the page as a visitor sees it; editing pauses until you go back.
States & animation · Free to start
Try states & animation on your own business
Set up in a couple of minutes. Your catalogue, orders and books stay yours to export.
- Live in 2 minutes
- Free to start
- No credit card
