Skip to content

Events

Events bring your scenes to life by connecting animations to real user interactions. Instead of static visuals, you can create experiences that respond to scrolling, hovering, mouse movement, and more.

Appear Events

Make a memorable first impression with entrance animations that trigger when your scene scrolls into view.

When you add an appear event, the Timeline opens—giving you a visual way to sequence, edit, and preview all entrance animations across layers.

Configuration

  • Property: Any animatable value (color, position, scale, opacity, etc.)
  • Start Value: Where the animation begins
  • End Value: Where it lands
  • Duration: How long the animation takes (0–1000ms)
  • Delay: Wait time before starting (0–2500ms)
  • Easing: Choose from smooth, bouncy, elastic, and other timing curves
  • Loop: Optionally repeat the animation forwards or in reverse
  • Loop Delay: Pause between repetitions

Behavior

  • Animations fire the moment your scene enters the viewport
  • Stack multiple appear events on different properties for layered effects
  • Use the Preview button to test animations without scrolling
  • Progress indicators help you visualize timing

Scroll Events

Tie animations directly to the scroll position for parallax effects, progress reveals, and scroll-driven storytelling.

Scroll Into View Mode

Animate a property as the scene moves through the viewport.

  • Property: The value to animate
  • End Value: Target state when fully scrolled into position
  • Start Position: When the animation begins (0–100% of viewport)
  • End Position: When it completes (0–100% of viewport)
  • Momentum: Add smoothness to the scroll response (0–100%)

While Scrolling Mode

React to active scrolling rather than scroll position—great for velocity-based effects.

  • Property: The value to animate
  • Scrolling Value: Target state during scroll
  • Momentum: Smoothing/inertia (0–100%)
  • Ignore Direction: Keep values positive regardless of scroll direction
  • Delta: Sensitivity to scroll movement (default: 0.01)

Behavior

  • Animations can track position directly or use momentum for smoother results
  • Visual preview shows the scroll range and current progress
  • Works with both directional and absolute scroll values
  • Combine with other event types for rich, layered interactions

Hover Events

Add interactivity that responds when users mouse over your scene.

Configuration

  • Property: The value to animate on hover
  • Hover Value: Target state while hovering
  • Duration: Animation length (0–1000ms)
  • Delay: Wait time before animating (0–2500ms)
  • Easing: Same timing curves as Appear events
  • Forwards Only: When enabled, the animation only plays on mouse enter and doesn't reverse on leave
  • Trigger On: Whether the animation should fire while hovering on the whole canvas or the element bounding box. Effect layers can only use "Element" if they are a child of a Shape/Image/Text layer.

Behavior

  • Triggers instantly when the cursor enters the scene
  • Smoothly reverses when the cursor leaves (unless Forwards Only is on)
  • Test with the Preview button—just hover it
  • Progress bar shows real-time animation state

Mousemove Events

Create effects that respond to the speed and motion of the cursor—perfect for adding energy and fluidity to your scenes.

Configuration

  • Property: The value to animate based on mouse movement
  • Target Value: The state to animate toward when movement is detected
  • Sensitivity: How quickly the effect responds to motion (0–1). Higher values mean faster, more dramatic reactions.
  • Momentum: Smoothing applied to the animation (0–1). Higher values create a more gradual, eased response.
  • Delay: Time (in ms) before the animation returns to its initial state after the mouse stops moving. Set to 0 for instant reset.

Behavior

  • The effect intensity builds as the user moves the mouse faster
  • When movement stops, the animation smoothly returns to its original value (after the delay)
  • Use momentum to control how fluid or snappy the response feels
  • Combine with other events for interactive, motion-driven experiences

Breakpoints

Breakpoints let you limit the animation to one or two breakpoints. If you want the animation to fire on Desktop only, you would check the "Desktop" checkbox.

This also let's you create different animations for different breakpoints. If you wanted to change the animation on Mobile, you would create two events; one for Desktop and one for Mobile. For your desktop animation you would check "Desktop" and "Tablet". Then for your altered mobile animation you would check "Mobile".

Checking none or all three allows the event to fire on all breakpoints.