Beyond tweening properties, interactions can run special effects: textSplit, textScramble, typewriter, counter, svgDraw, svgMorph, motionPath, plus media controls and image sequences.
Where: Right sidebar → Interactions → keyframe/effect editor — Add an effect to an interaction keyframe
Key ideas
- Text effects: textSplit (chars/words/lines, with stagger), textScramble, typewriter, and counter (from/to with prefix/suffix/separator).
- SVG effects: svgDraw (draw a path 0%→100%), svgMorph (morph to a target path or selector), motionPath (move along a path with autoRotate).
- Media effects: mediaControl (scrub a video/lottie/spline) and imageSequence (play frames on scroll).
Steps
- Open an interaction and edit its keyframe/effect.
- Choose an effect (e.g. textSplit, counter, svgDraw).
- Configure its options (split type + stagger, counter range, draw range, morph target).
- Preview to confirm the effect runs on the trigger.