the page
Block animations.
Ten animations, set on one block or on the whole page. Off by default, and off again for anyone who asked their phone for less motion.
pick one
Movement is a way of pointing. One block rising in as the page scrolls tells someone where to look. Every block moving at once tells them nothing and spends a second of their attention saying it.
Six of the ten are reveals, which animate a block in as it comes into view: fade, rise, cascade, scale, blur, and slide. The other four are emphasis gestures, which leave the block where it is and play once: wiggle, pulse, bounce, and shake. Set one on a single block, or set a page motion in the Design panel and let every block inherit it, including the ones you add tomorrow.
The default is off, and it stays off until you choose otherwise. A visitor whose device asks for reduced motion gets the finished page with nothing moving at all, which is what that setting is for.
three steps
Set it up.
- 01Open a blockSelect a block in your dashboard Studio and find its Animation setting.
- 02Pick a reveal or a gestureSix reveals animate the block in on scroll. Four gestures play once, in place.
- 03Or set the pageDesign has a Motion setting for the whole page, and any block can still say otherwise.
related pages
- Spotlight linkOne link, given the size it deserves. Artwork, a headline, and a line of context people read before they tap.
- Feature cardFor the thing that deserves more than a link row and less than a whole page. A picture, a heading, a paragraph, a button.
- Starter pagesSeven starting points. Pick one and your page opens with blocks in it, not with an empty studio and a cursor.
questions
Straight answers.
- How many animations are there?
- Ten: six reveals (fade, rise, cascade, scale, blur, slide) and four emphasis gestures (wiggle, pulse, bounce, shake).
- Are animations on by default?
- No. Every block is off until you set one, and a page with nothing set does not move.
- What happens on a device set to reduce motion?
- Nothing animates. The page renders in its finished state straight away, whatever you have set.