How to animate an element as visitors scroll through a scene
In TeleportHQ, any element inside a Scroll Scene can move with the visitor's scroll. Select the element, and in the right panel's Scroll Scene section, open Scroll animation and pick a ready-made animation, such as Rise in or Parallax · medium. For full control, choose Custom (keyframes) and set what changes, when, and by how much. The animation plays forward as visitors scroll down and backward as they scroll up.
Before you start
- The element must be inside a Scroll Scene. See How to create a scroll story with the Scroll Scene element.
- To animate an element anywhere else on the page, use the Motion element or an entrance animation instead. See Which animation options does TeleportHQ have?
Pick a ready-made scroll animation
- On the canvas, click the element you want to animate, for example a heading in your scroll story. To reach an element in a later chapter, click its row on the Scene Timeline under the canvas, or in the layers panel.
- In the right panel, on the Visual tab, find the Scroll Scene section near the top. It says which scene the element is part of.
- Click the Scroll animation list. It shows No animation when the element doesn't move with the scroll.
The two parts of the Scroll Scene section shown in the picture:
- Editing position (purple slider) moves the scene through its story on the canvas, so you can watch the animation. ▶ next to it plays the whole story. It only changes what you see in the editor; nothing is saved.
- Scroll animation is the list of animations.
- Pick an animation, for example Rise in. To find one, type in Search animations… at the top of the list.
- Drag Editing position, or click ▶, to see the element move.
The ready-made animations:
| Group | Animations | What they do |
|---|---|---|
| Parallax depth | Parallax · subtle, Parallax · medium, Parallax · strong | The element drifts against the scroll, a little or a lot. Use subtle for background layers and strong for things in front. |
| Reveal | Fade in & out, Unblur in, Rise in, Ghost out | Fades in and out, sharpens from a blur, rises from below as it fades in, or melts away into a blur at the end. Text also gets Word by word. |
| Travel | Slide across, Zoom through | Crosses the stage from right to left, or slowly grows as the scene plays. |
| Cinematic color | Color in, Sun up, Fade to mono | Black and white that floods with color, shadow that lifts into full light, or color that drains away at the end. |
| Dramatic | Crash zoom, Tilt reveal, Spin in | Slams in from a heavy zoom, stands up from a 3D tilt, or swings a quarter turn into place. |
| Texture | Breathe | Gently swells and relaxes across the whole scene. |
Inside a chapter, a ready-made animation plays during that chapter's part of the story. Outside chapters, it plays across the whole scene.
To remove a scroll animation, click ✕ next to the list, or choose No animation.
Build your own animation with keyframes
- Select the element, then in Scroll animation choose Custom (keyframes) (in the Advanced group). A Keyframes area appears. A new custom animation starts with an Opacity fade-in. If the element already had a ready-made animation, its parts are copied in, so you can adjust them.
- Each block under Keyframes is one property that changes. Set:
- Window: when it changes, from
0% (the start of the scene) to100% (the end). For example,20→50%. - Values: where it starts and where it ends. A bigger difference makes a stronger effect.
- + Add stop: adds a point in the middle of the path, so the change can, for example, go up and come back. Each point then gets its own line, with its moment in % and its value. × removes a point; a property keeps at least two.
- Window: when it changes, from
- To change another property, click + next to Keyframes (Add animated property) and choose one: Move X, Move Y, Scale, Rotate, Tilt X (3D), Tilt Y (3D), Opacity, Blur, Grayscale, Saturation, Brightness, Reveal sideways, Reveal downward or Count up.
- To remove a property, click × next to its name.
In the picture:
- Scroll animation reads Custom (keyframes).
- A Scale property: the picture grows slowly from the start to the end of the scene.
- + (Add animated property) adds another property.
The same keyframes show on the Scene Timeline under the canvas as bars and diamonds, which you can drag. See How to edit a Scroll Scene on the Scene Timeline.
Check that it worked
On the TeleportHQ canvas, drag Editing position or click ▶: the element moves as the story plays. To feel it with real scrolling, click Preview in the bottom toolbar and scroll through the scene. See How to preview your site before publishing.
Troubleshooting
There's no Scroll Scene section, or no Scroll animation list The element isn't inside a Scroll Scene. Move it into the scene's chapter, or use the Motion element for elements elsewhere on the page.
The element is invisible before or after its moment Before its Window starts and after it ends, a property keeps its nearest end value. An Opacity that starts at 0 keeps the element hidden until its window begins. Change the window, or the first value.
Good to know
- On a Scroll Video inside a scene, the same choices are in a section called Scroll effects. See How to add a video that plays as visitors scroll (Scroll Video).
- To make text appear word by word, see How to reveal text word by word as visitors scroll. For numbers that count up, see How to make numbers count up as visitors scroll.
- For visitors who turn on reduced motion, a scene set to Keep the story (the default for new scenes) leaves out moves, zooms, turns, tilts and reveals. Fades, blur and color changes still follow the scroll. See What do visitors who turn on reduced motion see?
- You can also ask the AI Assistant, for example:
Make the photo in the hero scroll story zoom in slowly as visitors scroll. - In code downloads, scroll animations play in the Next.js and HTML downloads. React, Vue, Nuxt and Angular downloads show the same content without the animation.