Add motion

In this tutorial you animate a page with presets, then shape the motion in the interaction timeline: move and stretch steps, scrub through them and play them back. You need a page with a hero (a headline and a subtitle), a button and a collection list of cards. Interactions run in preview and on the published site; in design mode elements stay in their final state, so you can keep editing.

Animate the hero on load

1. Open the Interactions tab

   Select the headline. In the inspector, open the Interactions tab. It lists the interactions that target the selected layer.

2. Add a load preset

   Press Add and choose Fade in on load. A new interaction appears with the trigger Page load and one step that fades the headline in.

3. Make it slide too

   Click the interaction to open it. In the step, the From row holds the starting values. Press + (Add from property) to add a row, set its property to y and its value to 40. The headline now rises 40 px while it fades in.

4. Preview it

   Press the play icon (Preview) on the interaction to play it on the canvas, or press ⌘↵ to preview the whole page. Press ⌘↵ again to go back to editing.

Reveal cards on scroll

1. Select one card

   Select the card inside the collection list. The list repeats this card once per item, so an animation on it applies to every card.

2. Add a scroll preset

   In Interactions, press Add and choose Slide up on scroll. The trigger is Scroll into view and Start is top 80%: the animation starts when the top of the trigger element reaches 80% of the window height.

3. Trigger on the list

   Set On to the collection list. The whole group then starts as soon as the list scrolls into view.

4. Stagger the cards

   In the step's Stagger row, keep Each and set S to 0.1. Each card now starts 0.1 seconds after the one before it. Set From to Center to start from the middle card instead.

Add a hover effect

1. Add the preset

   Select the button, press Add and choose Hover scale. The trigger is Hover and On is the button itself: it grows to scale 1.05 when the pointer enters and shrinks back when it leaves.

2. Choose where it runs

   Under Runs on, clear Phone. Phones have no pointer to hover with, so the effect only runs on Desktop and Tablet.

Tune it in the timeline

1. Open the timeline

   Select the headline and press the chart icon (Open in timeline) on its interaction. The timeline opens under the canvas. You can also press ⌥T or the Timeline button in the toolbar. Pick another interaction in the menu at the top left; the badge next to it shows the trigger.

2. Read the panel

   The Layers column names the layer each step animates. The ruler shows seconds, and each step is a bar from its start to its end. Drag the top edge of the panel to make it taller.

3. Add the subtitle

   Select the subtitle on the canvas and press + (Add step) in the timeline header. A new bar fades the subtitle in after the headline.

4. Move and resize bars

   Drag the subtitle bar to the left so it starts while the headline is still moving. Drag its right edge to make it longer. Bars snap to 0, to the playhead and to the edges of other bars; hold ⌥ while you drag to turn snapping off.

5. Scrub and play

   Drag across the ruler to move the playhead: the canvas shows the animation at that moment. Press play in the transport controls to watch it, Loop to repeat it, and the speed button to cycle between 0.25x, 0.5x, 1x and 2x.

6. Set the ease

   Click a bar to make it the active step, then pick an ease in the header, for example power3.out. Duplicate step and Delete step sit next to it.

Edit with the keyboard

1. Nudge a bar

   Click a bar to focus it. ← and → move it by 0.01 seconds; hold ⇧ to move by 0.1. Hold ⌥ with the arrows to change its length instead.

2. Reorder steps

   ⌥↑ and ⌥↓ move the step up or down in the list. ⌘D duplicates it and ⌦ removes it. ↵ selects its layer on the canvas.

3. Use the step menu

   Right-click a bar for the same actions: Select layer, Duplicate step, Move up, Move down and Delete step.

4. Move the playhead by key

   Click the ruler, then use the arrow keys to step the playhead, and Home or End to jump to the start or the end.

Test hover and scroll

1. Play the hover

   Pick the hover interaction in the timeline menu. The transport adds Hover in, which plays forward, and Hover out, which plays backwards from the playhead, as the site does when the pointer leaves.

2. Check the scroll reveal

   Pick the scroll interaction. The cards' bar has a stagger tail that matches the number of cards in the list. Scrub it to see the cards arrive one by one.

3. Close the timeline

   Press ⌥T or the close button in the header. Then preview the page with ⌘↵ to see everything run with real triggers.

What you learned

• Presets give you a working load, scroll or hover interaction in one click; the trigger and the steps stay editable.
• Stagger on a repeated layer animates every item of a collection list one after another.
• The timeline shows the steps as bars you can drag, scrub, play and edit from the keyboard.

Keep going with the next tutorials, or read the guides behind this one: