Skip to content

Events

Events in Unicorn.studio allow you to create dynamic animations and interactions. There are three main types of events:

Appear Events

Appear events trigger animations when your scene enters the viewport. These animations can be used to create engaging entrance effects. When you add an appear event, the Timeline will appear. This lets you view, edit, and playback all appear events across layers.

Configuration

  • Property: Choose any animatable property (color, position, scale, etc.)
  • Start Value: The initial state when the scene appears
  • End Value: The final state to animate to
  • Duration: Length of animation (0-1000ms)
  • Delay: Time before animation starts (0-2500ms)
  • Easing: Various easing functions

Behavior

  • Animations start when the scene enters the viewport
  • Multiple appear events can run simultaneously on different properties
  • Events can be previewed using the Preview button
  • Progress is visually indicated in the interface

Scroll Events

Scroll events let you create animations that respond to page scrolling. They support two distinct modes:

Scroll Into View Mode

  • Property: The property to animate during scroll
  • End Value: Target value when fully scrolled into position
  • Start Position: When the animation begins (0-100% of viewport)
  • End Position: When the animation completes (0-100% of viewport)
  • Momentum: Adds smooth easing to the scroll response (0-100%)

While Scrolling Mode

  • Property: The property to animate
  • Scrolling Value: The target value during scroll
  • Momentum: Adds inertia to the animation (0-100%)
  • Ignore Direction: When enabled, values remain positive regardless of scroll direction
  • Delta: Controls sensitivity to scroll movement (default: 0.01)

Behavior

  • Animations can track scroll position directly or use momentum
  • Visual preview shows scroll range and progress
  • Supports both directional and absolute scroll values
  • Can be combined with other event types

Hover Events

Hover events create interactions when users mouse over the scene.

Configuration

  • Property: The property to animate on hover
  • Hover Value: The target value during hover
  • Transition:
  • Duration: Length of animation (0-1000ms)
  • Delay: Time before animation starts (0-2500ms)
  • Easing: Same easing options as Appear events
  • Forwards Only: When enabled, only animates on mouse enter

Behavior

  • Triggers when mouse enters the scene
  • Reverses when mouse leaves (unless Forwards Only is enabled)
  • Can be previewed by hovering the Preview button
  • Shows real-time progress during interaction