Animation & motion

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.

A scroll story in TeleportHQ is a section built with the Scroll Scene element that stays on screen while visitors scroll through it, so its chapters take the stage one after another; add one from Elements → Primitives → Motion → Scroll Scene, or a ready-made one from Elements → Sections → Stories.

In TeleportHQ, open Elements → Primitives and click Scroll Scene in the Motion group; a scene with three starter chapters is added and selected, and you replace their text, move through the story with the Editing position slider and check the real scrolling in Preview.

In TeleportHQ, open Elements → Sections, click the Stories category and click a story such as Product story; a complete Scroll Scene with five chapters is added at the end of the page and selected, ready for you to move into place and fill with your own texts and pictures.

In TeleportHQ, select a Scroll Scene and click + in the Chapters row of the right panel (or + Chapter in the Scene Timeline) to add a chapter from 24 templates; drag a chapter's row in the Scene Timeline or the layers tree to reorder it, and click Re-deal evenly to give every chapter an equal share of the story again.

In TeleportHQ, select a Scroll Scene and use its Scroll Scene section in the right panel to set Scroll length (how many screens of scrolling the story takes), the Background (a colour, the dark story gradient or a video), Smoothing, Pin while scrolling and what visitors who ask for reduced motion see.

In TeleportHQ, select a Scroll Scene or anything inside it and the Scene Timeline opens under the canvas, with one row per chapter; play or scrub the story with its playhead, open a chapter to see what moves inside it, drag bars to change when things play, and reorder chapters by dragging their rows.

In TeleportHQ, select a Scroll Scene and set Chapter snap to Gentle in the right panel's Scroll Scene section, so that when a visitor stops scrolling between two chapters the story glides to the nearest chapter; you can also pin the exact moment each chapter settles on from the Scene Timeline.

In TeleportHQ, select any element inside a Scroll Scene and choose a Scroll animation in the right panel's Scroll Scene section, such as Rise in or Parallax, or choose Custom (keyframes) to decide what changes, when and by how much, so the element moves with the visitor's scroll.

In TeleportHQ, select a heading or paragraph inside a Scroll Scene and choose Word by word under Scroll animation in the right panel's Scroll Scene section, so its words arrive one after another as visitors scroll; choosing No animation joins the text back into one piece.

In TeleportHQ, add a Big number or Three numbers chapter to a Scroll Scene to show figures that count up from 0 as visitors scroll, change each figure under Keyframes → Count up in the right panel, or ask the AI Assistant to make numbers already on your page count up.

In TeleportHQ, add a Scroll Video from the Motion group of the Elements panel, then choose or upload a clip (or make one with AI); TeleportHQ optimizes the clip for scrolling, plays it forward as visitors scroll down and backward as they scroll up, and shows a still picture to visitors who ask for reduced motion.

In TeleportHQ, click Make one with AI on a Scroll Video (or ✦ in its Source row), describe the clip, choose 4, 6 or 8 seconds and click Generate video; the clip costs about 2,250 AI tokens per second, usually takes about a minute, can be made longer with Extend clip, and still reaches your project if you reload the editor while it's being made.

In TeleportHQ, click the Project settings cog at the bottom of the left sidebar, open Page transitions under Appearance and click a card such as Fade or Slide up; the transition then plays every time a visitor moves from one page of your site to another, in Preview and on the published site.

In TeleportHQ, open Project settings → Page transitions, click the Design your own card at the bottom of the list, pick a starting point in Start from, then set Duration (s), Easing, and how the new page arrives and the old page leaves; the card shows the result as you change the values.

In TeleportHQ, right-click a page in the Pages list and switch on Skip page transition (or Skip page transitions on a folder); that page then appears instantly instead of playing your site's page transition, while leaving it still plays the transition.

In TeleportHQ, when a picture inside a link opens a page that shows the same picture, the picture flies into its place on the next page while the page transition plays; it's on by default, under Project settings → Page transitions → Pictures → Fly to the next page.