How to add a transition to an element

A transition in TeleportHQ makes a style change smooth instead of instant. For example, a button fades to a darker color when a visitor points at it, instead of switching at once. Select the element, click + in the Transition section of the right panel, then click the new line to set what changes (Property), how it feels (Easing), how long it takes (Duration) and when it starts (Delay).

Before you start#

• A transition only shows when a style changes, most often in a hover state. Set up the change first, for example a darker background on hover. See How to add hover and click effects (interaction states).
• When you add the first state to an element, TeleportHQ already gives it a short transition (all 0.3s ease) so the change doesn't snap, unless the element has a transition of its own. Use the steps below to change it.
• Transitions are available on every plan.

Steps#

1. On the canvas, click the element once to select it. For example, an Order now button.
2. In the right panel, on the Visual tab, scroll to the Transition section, below Shadow.
3. Click + (tooltip Add transition). A line all 300ms ease appears in the section.

4. Click the line, or the pencil next to it (tooltip Edit transition). The Edit Transition panel opens beside the right panel.
5. In Property, choose what to animate, for example background-color. The list has all, opacity, transform, color, background-color, border-color, box-shadow, filter, width, height, max-height, top and left. You can also type another CSS property.
6. In Easing, choose how it feels, for example ease-out. The choices are linear, ease, ease-in, ease-out, ease-in-out, step-start and step-end.
7. In Duration, type how long the change takes, for example 200. A plain number is read as milliseconds; you can also type 0.2s.
8. In Delay, type how long to wait before it starts. Usually 0.
9. Press Esc, or click outside the panel, to close it.

To time two properties differently, for example a quick color change and a slower shadow, click + again and set up the second line. To remove a line, click its Remove transition button.

Transitions that come from a class#

Lines shown in grey in the TeleportHQ Transition section come from a CSS class on the element, and can't be edited here. To change them for every element with that class, edit the class. See How to edit a CSS class.

To give one element its own transitions instead, click +: TeleportHQ copies the class's lines into the element's own list and adds a new line, because an element's own transitions replace its class's transitions.

Check that it worked#

The TeleportHQ Transition section shows your line, for example background-color 200ms ease-out, and the note "Transitions play in Preview and on the published site." Open Preview and point at the element to see the change happen smoothly. See How to preview your site before publishing.

Troubleshooting#

The field goes back to its old value after I type TeleportHQ didn't accept the value, so nothing was saved. Use a property name in lowercase with hyphens, such as background-color, and a time such as 200ms or 0.2s.

"This transition uses a value this section cannot edit — change it in the Advanced tab." The transition uses something the section can't show, such as a design token. Edit it in the Advanced tab. See How to write CSS directly (Advanced tab).

"Mixed values" You selected several elements whose transitions differ. Select one element at a time.

Nothing happens when I point at the element in Preview A transition smooths a change, it doesn't create one. Check that a hover state changes a style, and that the Property of the line is that style, or all.

Good to know#

• A transition smooths a change between two looks. To make an element move by itself, for example when it scrolls into view, use Motion. See Which animation options does TeleportHQ have?
• A transition on the element's normal look plays both ways: when the visitor points at the element and when they move away.