How to animate an element when it scrolls into view

To make an element in TeleportHQ fade or slide in when a visitor scrolls to it, select the element, click Add motion… in the Motion section of the right panel, and pick an entrance such as Slide up. On scroll into view is the default trigger, so nothing else is needed. In Motion Settings you can choose whether it plays only the first time and how much of the element must be on screen first.

Before you start#

• Entrances work in website and web app projects, on every plan.
• To give the whole site entrances in one step, animate all pages instead.
• If the element already has an old Animate on Reveal animation, see What happened to the Animation section, and how do I switch to Motion?

Steps#

1. On the canvas, click the element once to select it. For example, a "Fresh bread every morning" heading.
2. In the right panel, scroll to the Motion section and click Add motion….
3. In the Entrance group, click an entrance. For example, Slide up. The element moves into a Motion element, which is selected, and Motion Settings open.
4. Check that Trigger reads On scroll into view.
5. Optional: set Speed and Delay (s). See How to choose a Motion animation and its speed.
6. Animate once is on: the entrance plays the first time the visitor scrolls to the element. Turn it off to replay it every time the element comes back into view.
7. Visible amount sets how much of the element must be on screen before it plays. A low value plays it sooner. 0% plays it as soon as any part shows.

Make a group of items arrive one after another#

To make cards, logos or list items in TeleportHQ come in one after another as the visitor scrolls to them, animate them with one Motion element:

1. Select the container that holds the items, for example the grid of cards.
2. Click Add motion… and pick an entrance. The whole container moves into a Motion element.
3. In Motion Settings, drag Stagger children to the gap you want between two items. For example, 0.1 s.

The cascade reaches the items inside the grid, not only the grid itself. See How to create advanced animations with the Motion element.

Check that it worked#

On the TeleportHQ canvas, the entrance plays once as soon as the element shows: the canvas doesn't wait for a scroll. Click the play button (▶) next to Animation to watch it again.

To check the real timing, open Preview and scroll down to the element. See How to preview your site before publishing.

Troubleshooting#

The entrance plays before I scroll to it On the canvas, entrances always play straight away. In Preview, an element that's already on screen when the page opens plays at once, because it's already in view. Use On scroll into view for elements lower on the page, and On load for the top of the page.

I don't see the Motion section Select a single element. If it already sits inside a Motion element, press Esc to select that Motion element and change its settings. More causes are in How to animate any element (Add motion).

Nothing moves, in the editor or in Preview If "reduce motion" is turned on in your own computer's settings, animations stand still, the way visitors with that setting see them. See What do visitors who turn on reduced motion see?

Good to know#

• Visitors whose device asks for reduced motion see the element in its place without the entrance.
• Entrances work at every screen size.