Add movement to pages and elements.
TeleportHQ animates your site with Motion, in any project and on every plan; use Add motion in the right panel for one element, the Motion element for a group, Animate all pages for the whole site, the Transition section for smooth style changes, Scroll Scenes for scroll stories and Page transitions between pages, plus Lottie files and your own CSS.
In TeleportHQ, select an element, click Add motion… in the Motion section of the right panel and pick an animation such as Slide up; the element moves into a Motion element right where it stands, plays when visitors scroll to it, and one undo takes it back out.
In TeleportHQ, select a Motion element, click the Animation field in Motion Settings to pick one of the ready-made animations (or Custom to set your own From and To values), press the play button to watch it, then set Speed to Snappy, Balanced or Smooth, or Custom for an exact number of seconds.
In TeleportHQ, click Motion in the Motion group of the Elements panel to add an animation container, put your content inside it, then set the animation, what starts it (on load, on scroll into view, scroll-linked parallax, on hover or on tap), its speed and a stagger in Motion Settings; it works in websites and web apps alike.
In TeleportHQ, the old Animation section (effects such as fadeInUp and Animate on Reveal) is now called Animation (legacy) and only shows on elements that already use it; those animations keep working, new ones come from Motion, and Switch to Motion moves an old animation to the closest Motion animation with the same timing.
In TeleportHQ, select the element, click Add motion… in the Motion section of the right panel and pick an entrance such as Slide up; it plays when the visitor scrolls to the element, because On scroll into view is the default trigger, and Animate once and Visible amount in Motion Settings fine-tune when.
In the TeleportHQ editor, press Ctrl+Shift+P (Cmd+Shift+P on Mac) and choose Animate current page or Animate all pages; after you review and confirm, headings, images, buttons and card lists get gentle entrance animations as visitors scroll, nothing else on the page changes, and one Undo removes them all.
In TeleportHQ, a transition makes a style change smooth instead of instant, for example a button that fades to a new color on hover; select the element, click + in the Transition section of the right panel, then click the new line to set its Property, Easing, Duration and Delay.
In TeleportHQ, select the row of logos, open the AI Assistant and ask it to make the row slide sideways by itself; it builds a seamless loop that plays on the canvas, in Preview and on your site, stands still for visitors who ask for less motion, and can be re-timed or stopped with another request.
TeleportHQ sites respect the "reduce motion" setting of a visitor's device automatically; Motion animations show the content in place without moving, rows that slide by themselves stand still and can be swiped, page transitions become instant, and each Scroll Scene and Scroll Video shows what you choose in its Reduced motion setting.
In TeleportHQ, click or drag the Lottie element from Elements → Media onto the page, then paste your animation's JSON link from LottieFiles into the src field of the Attributes section in the right panel, and set autoplay, loop, speed, background and hover.
To use your own CSS animation in TeleportHQ, click the Project settings cog, open Data & code → Custom code, paste a style block with your @keyframes under Head (it saves as you type), then add an animation property (for example, animation: softPulse 2s infinite) to an element in the right panel's Advanced tab; it plays in Preview and on the published site, not on the editor canvas.
