Which animation options does TeleportHQ have?

TeleportHQ animates your site with Motion. To animate one element, select it and click Add motion… in the right panel. To animate a group, or to make cards arrive one after another, use the Motion element. To animate the whole site in one step, run Animate all pages. For smooth hover changes there's the Transition section, for stories that play as visitors scroll there are Scroll Scenes, and Page transitions decide how one page hands over to the next. All of them work in any TeleportHQ project, on every plan, without turning a website into a web app.

The options at a glance#

Motion: one element or a whole group#

Motion is the TeleportHQ animation system behind most of these options. It has over 20 ready-made animations, such as Fade in, Slide up, Pop in or Pulse, and lets you choose when each one plays: when the page opens, when the visitor scrolls to it, while the visitor scrolls past it (parallax), on hover, or on a tap or click.

• Add motion is the quickest way to animate one element. Pick an animation and TeleportHQ puts the element inside a Motion element right where it stands. See How to animate any element (Add motion).
• The Motion element is a container you fill yourself. Use it to animate several elements as one, or to make cards ripple in one after another. See How to create advanced animations with the Motion element.
• Every Motion element has the same Motion Settings: the animation, its speed, what starts it and more. See How to choose a Motion animation and its speed.

The most common use is an entrance: an element that fades or slides in when the visitor scrolls to it. See How to animate an element when it scrolls into view.

The Motion group in the Elements panel#

The TeleportHQ Elements panel has a Motion group with three elements:

1. Motion: an animation container. Put elements inside and give them entrances, hovers and staggered reveals.
2. Scroll Scene: a story driven by scrolling, where chapters take the stage one after another.
3. Scroll Video: a video that plays frame by frame as the visitor scrolls.

Animate a whole site in one step#

Animate current page and Animate all pages are TeleportHQ command-palette actions. They look at your pages and add calm entrances to headings, images, buttons and card lists. You review the plan before anything is saved, the header, navigation and footer are left alone, and one Undo removes everything. No AI tokens are used. See How to animate a whole page in one click.

Smooth changes with transitions#

A transition in TeleportHQ makes a style change smooth instead of instant, for example a button that fades to a darker color when a visitor points at it. You add one in the Transition section of the right panel. See How to add a transition to an element and How to add hover and click effects (interaction states).

Rows that slide by themselves#

To make a row of logos, quotes or badges slide sideways in an endless loop, ask the TeleportHQ AI Assistant. It builds the loop for you, and the loop plays on the canvas, in Preview and on your site. See How to make a row of logos scroll by itself.

Scroll stories#

A scroll story is a section that plays as the visitor scrolls: chapters come and go, words appear one by one, numbers count up, or a video plays frame by frame. In TeleportHQ you build one with the Scroll Scene element, or add a ready-made story from the Sections tab. See What is a scroll story (Scroll Scene)?, How to add a ready-made scroll story and How to add a video that plays as visitors scroll (Scroll Video).

Page transitions#

Page transitions decide how your TeleportHQ site moves from one page to the next, for example a soft fade or a slide. You choose one for the whole site in Project settings → Appearance → Page transitions. You can also skip it for one page, or make a picture fly into its place on the next page. See How to add page transitions to your site.

Lottie animations and your own code#

• Lottie animations are small animated illustrations, such as an animated checkmark, made in a design tool or found on LottieFiles. See How to add a Lottie animation.
• Your own CSS keyframes or an animation library go in Custom code. This is for people comfortable with CSS. See How to add CSS keyframes or animation libraries with custom code.

What happened to the Animation section?#

The older Animation section, with effects such as fadeInUp and Animate on Reveal, is now called Animation (legacy). It only shows on elements that already use it, and those animations keep working. New animations come from Motion. See What happened to the Animation section, and how do I switch to Motion?

Good to know#

• Where animations play. Most Motion animations play on the TeleportHQ canvas while you edit: an entrance plays when the element shows. Scroll-linked motion, transitions and custom code play in Preview and on your published site. See How to preview your site before publishing.
• Visitors who ask for less motion. TeleportHQ respects the "reduce motion" setting of your visitors' devices. See What do visitors who turn on reduced motion see?
• No web app needed. Motion, Scroll Scenes, Scroll Videos and Page transitions all work in a website project. Adding them doesn't ask you to enable web app features.
• Code downloads. The Next.js and HTML code downloads play your motion. Other code formats ship the same content without the animation, and the download window tells you so.
• Plans. Animations aren't limited by plan.