Interactions
Build every animation on a timeline: entrances, scroll movement, clicks, hover, tickers and drag, and control the starting state.
Updated November 9, 2026
Everything that moves on a site is built here, from a simple fade to a sequence with several steps and targets. You choose what starts it and what it does.
Create an interaction
Select a block and open the Interactions tab. To animate on page load or page scroll, you do not need to select a block.
Under Interactions, click + and choose a trigger. The editor switches to Interaction Mode, with a timeline at the bottom.
Under Actions, click the add button and choose an action.
Press Space or the play button on the timeline to preview.
Click the X at the top of the panel to leave Interaction Mode. Your work is part of the page draft and goes live when you publish.
Triggers
Click: choose which clicks count, such as Each click, First click, Odd clicks, or a custom pattern such as
1,4.Hover: set one action for On enter and another for On leave.
Scroll: run when a block comes into view, or tie the animation to the scroll position.
Mouse move: follow the cursor over the element or the whole viewport.
Swipe: run on a swipe in any direction, or just one.
Page load: run when the page opens.
Custom event: run when your own code fires a named event.
Most triggers also have a Control setting: Play from beginning, Play, Reverse, Pause, Resume, Toggle play/reverse, Stop or No action. Delay and Speed adjust the timing.
Scroll settings
Set the Target to the page, an element, a class or a custom selector. For an element, choose where the animation starts and ends by matching an element edge to a viewport edge, using top, center, bottom, or a value such as 20% or 150px. Turn on Pin trigger element to hold the element in place while the animation plays, and Show scroll markers to see the start and end while you work.
Under Controls, choose how the scroll drives the animation:
Scrub on scroll: the animation moves forward and back with the scroll. Smooth sets how softly it follows.
Trigger actions: the animation plays when the target reaches the start or end. Set what happens on Enter, Leave, Enter back and Leave back.
Actions
Animation Presets: fade, slide, scale, pop, drop, stagger and text reveal.
Animate: set From and To for each property, such as opacity, movement, scale, rotation, size, color or filters.
Set: apply values instantly. Only this kind can change Display.
Commands: Scroll to element, Open URL, Add / remove class, control a video or Lottie, and Open overlay, Close overlay or Toggle overlay.
Advanced FX: Draw SVG stroke, Morph SVG, Move along path, Scramble text, Ticker and Drag.
Each action has a Target, which by default is the block that triggered it, a Start time and, for animations, a Duration and Ease. You can also set Repeat and Stagger, and Split text to animate characters, words or lines. Drag clips on the timeline to change their timing.
To reuse an action on this site, click the bookmark icon to save it. It appears under Your Presets.
Common animations
Appear when scrolled into view: use the Scroll trigger with Trigger actions, add a preset such as Fade in, and turn on Set as initial state.
Move with the scroll, or parallax: use the Scroll trigger with Scrub on scroll, and add an Animate action that moves the block.
Repeat continuously: set Repeat on an Animate action and turn on alternate direction to play it back and forth.
Hover, press and focus changes: for a simple style change, use the state switcher on the Style tab. See Layout, breakpoints and styles.
Ticker and Drag
These two start with the page and keep running until the visitor leaves, so they work only on the Page load trigger. They have no duration or ease.
Ticker moves the block's children continuously, like a marquee.
Direction: left, right, up or down.
Speed: default 60 px/s.
Gap: default 24px.
Pause on hover: on by default.
Drag lets visitors drag the block.
Axis: both, horizontal or vertical.
Bounds: parent block or none.
Inertia: the block keeps moving briefly after release.
Snap back: returns the block to its place on release.
Set the starting state
An element looks normal until its action runs. If it should start hidden or moved, turn on Set as initial state on that action. Its From values are then applied when the page loads, and the element waits in them until the action runs. On a Set action, its values are applied at page load.
Interactions made before this option existed apply their start states automatically. They show a note in Settings with a Use "Set as initial state" per step link, which converts them without changing how they look.
Limits and good to know
Animations inside overlays, tabs and accordions wait until that content is visible.
Related
Questions about building on PraismaHub? We're happy to help.
Contact us
