How to create advanced animations with the Motion element

The TeleportHQ Motion element is a container that animates everything you put inside it. Add it from the Motion group of the Elements panel, place your content inside, and set the animation in Motion Settings in the right panel. It can play when the page opens, when the visitor scrolls to it, while the visitor scrolls past it (parallax), on hover or on a tap, and it can make the items inside arrive one after another.

Before you start#

• The Motion element works in website and web app projects, on every plan. Adding it doesn't turn a website into a web app.
• You need a role that can edit components.
• To animate one element that's already on the page, Add motion is quicker: it puts the element inside a Motion element for you.

Add a Motion element#

1. On the canvas, select the container that should hold the animation. For example, the section with your product cards.
2. In the left sidebar, click Elements, then the Primitives tab.
3. In the Motion group, click Motion. You can also drag the card onto the canvas.
4. An empty Motion element appears in the selected container, and it's selected.
5. Drag the content you want to animate into the Motion element, on the canvas or in the layers tree. For example, three product cards.

Choose what starts the animation#

With the Motion element selected, the TeleportHQ Motion Settings are near the top of the right panel, below Attributes, Classes and States. In Trigger, pick what starts the animation:

• On load: when the page opens.
• On scroll into view (the default): when the visitor scrolls to it.
• Scroll-linked (parallax): the movement follows the scrollbar while the element passes through the screen.
• On hover: while the visitor points at it.
• On tap / click: while the visitor presses it.

Then pick the animation and its speed. See How to choose a Motion animation and its speed.

For hover and tap, the element moves to its end values while it's pointed at or pressed, and back when the visitor lets go. The ready-made animations end on the element's normal look, so pick Custom (use keyframes) in Animation and set the To values. For example, add Scale with To 1.05 for a card that grows a little when pointed at.

For scroll-linked (parallax) motion, pick Custom (use keyframes) and add a Move Y row, so the element drifts as the visitor scrolls. Three more settings show:

• Editing position: drag it to see the movement at any point of the scroll, right on the canvas. It only changes what you see while editing. The play button next to it runs the whole movement.
• Scroll window: which part of the element's trip through the screen drives the animation: Full pass through the screen, While it fills the screen, Only while entering or Only while leaving.
• Smoothing: how much the movement trails behind the scroll. 0 follows the scroll exactly.

Make items arrive one after another#

The TeleportHQ Stagger children setting makes the items inside a Motion element start one after another instead of all at once, so a grid of cards ripples in.

1. Put the items in one Motion element. They can sit inside a grid or a list inside it: the cascade reaches the cards themselves.
2. In Motion Settings, drag Stagger children to the gap you want between two items. For example, 0.1 s. 0 starts them all together.

Stagger children shows when the Motion element has something inside it, and isn't available for scroll-linked motion.

More settings#

• Animate once: play only the first time the element scrolls into view. On by default. Off replays it each time it comes back into view.
• Visible amount: how much of the element must be on screen before it plays. 0% plays as soon as any part shows.
• Repeat: extra plays after the first. 0 plays once, 2 plays three times in total, -1 repeats forever.
• Repeat type: how each repeat runs: Loop (starts over), Reverse (plays backwards, then forwards again) or Mirror (goes smoothly back and forth). Shown when Repeat isn't 0.

Animate once and Visible amount show for On scroll into view and Scroll-linked (parallax).

Check that it worked#

On the TeleportHQ canvas, On load and On scroll into view animations play as soon as the element shows. Click the play button (▶) next to Animation to watch it again. For scroll-linked motion, drag Editing position.

Open Preview to try every trigger the way a visitor does: scroll, point and click. See How to preview your site before publishing.

Troubleshooting#

"Your current role does not have permission to edit components" Your role can't add Motion elements. Ask a workspace owner or admin.

My element doesn't move on the canvas Scroll-linked (parallax) motion doesn't play by itself on the canvas, because the canvas doesn't scroll the way a visitor's page does. Drag Editing position, or open Preview and scroll.

Nothing happens on hover A ready-made animation such as Fade in ends on the element's normal look, so hovering changes nothing you can see. Pick Custom (use keyframes) and set To values that differ from the normal look.

Nothing moves at all If "reduce motion" is turned on in your own computer's settings, the canvas and Preview show animations standing still. See What do visitors who turn on reduced motion see?

I don't see the Animation (legacy) or Motion section for my Motion element A Motion element uses Motion Settings instead.

Good to know#

• Add motion and Animate all pages both create Motion elements, so their animations are changed here too. See How to animate a whole page in one click.
• The TeleportHQ AI Assistant can add and set up Motion elements for you.
• If you download your site's code, the Next.js and HTML downloads play the animations. Other code formats ship the content without them, and the download window tells you so.