What happened to the Animation section, and how do I switch to Motion?

In TeleportHQ, the old Animation section, with effects such as fadeInUp and the Animate on Reveal checkbox, is now called Animation (legacy). It only shows on elements that already have an animation from it, and those animations keep playing as before. New animations come from Motion: select an element and click Add motion… in the Motion section. To move an old animation to Motion, select the element and click Switch to Motion.

What changed#

• The section is called Animation (legacy). It shows only on elements that already use it. You can't start a new animation there, so it has no + button any more.
• Every other element shows a Motion section instead, with an Add motion… button. See How to animate any element (Add motion).
• Nothing breaks. Elements that already have an old animation keep it, in the editor and on your published site, until you switch them or remove the animation.

Motion gives the same entrances with more control: what starts the animation, its easing, a cascade across several items, scroll-linked movement and a preview right in the panel.

How to switch an animation to Motion#

1. On the canvas, click the animated element once to select it.
2. In the right panel, find the Animation (legacy) section.
3. Click Switch to Motion.

The message Switched to Motion — same entrance, now edited in Motion Settings appears. The element moves into a new Motion element in the same spot, and that Motion element is selected with its Motion Settings open. The old animation is removed from the element, so the two never play at once.

To go back, press Ctrl+Z (Cmd+Z on a Mac) once: the old animation returns in one step. See How to undo and redo changes.

What Switch to Motion keeps#

TeleportHQ picks the closest Motion animation and keeps the timing:

The effect becomes the closest Motion animation:

• Effects that enter from below or above, such as fadeInUp, slideInDown or bounceInUp, become Slide up or Slide down. The …Big versions travel further.
• Effects that enter from the left become Slide right, and effects from the right become Slide left.
• Zoom effects become Zoom in, other bounce effects become Pop in, rotate and roll effects become Rotate in, and flip effects become Tilt in.
• Attention effects that loop, such as bounce, pulse, flash, shakeX, tada, wobble, jello or heartBeat, become Pulse.
• Exit effects such as fadeOut, and anything else, become Fade in.

After the switch you can pick another animation or change its speed. See How to choose a Motion animation and its speed.

Keep or remove an old animation#

You don't have to switch. While an element keeps its old animation, the TeleportHQ Animation (legacy) section still lets you edit it:

• Animation, Direction, Iteration, Easing, Duration and Delay.
• Animate on Reveal: plays the animation when the element scrolls into view, at every screen size.
• The play button: plays the animation once on the canvas.
• The − button: removes the animation. The Animation (legacy) section then disappears, and the Motion section takes its place.

Good to know#

• Switch to Motion needs a role that can edit components. Otherwise you see Your current role does not have permission to edit components.
• Animate all pages leaves elements with an old animation alone, so it never adds a second animation on top. See How to animate a whole page in one click.