Skip to main content

Animation Basics

Start with movement, scale, or opacity. Add one animation, preview the result, then tune the timing before adding more effects.

Understanding the Animation System​

Add and edit animations​

  1. Drag and Drop: Drag an animation from the right panel onto the timeline
  2. Double-Click: Double-click an animation to add it instantly to the selected layer
  3. Select an existing animation bar to edit its settings in the right panel

Animation Categories​

The browser groups effects under Animations, Presets, Filters, and Special Effects. This guide covers:

  • Basic Animations - Fundamental transforms like move, scale, rotate
  • Preset Animations - Ready-to-use effects like bounce, swing, grow
  • Filter Animations - Visual effects like blur, pixelate, grayscale
  • Advanced Effects - Shader-based effects like ripple, flag, rays

The Animation Timeline​

The timeline is your control center for all animations.

Timeline Components​

┌─────────────────────────────────────────────────────────┐
│ ▶ ⏸ ⏹  [===Timeline ruler with markers===]   📷       │
│                                                          │
│ Move X   ░░░░░░░░░░░░                                   │
│ Opacity      ░░░░░░░░░░░░░                              │
│ Scale                     ░░░░░░                        │
└─────────────────────────────────────────────────────────┘
  • Playback Controls: Play, pause, and stop buttons
  • Timeline Ruler: Time markers for precise placement
  • Animation Blocks: Visual representation of animations
  • Playhead: Shows current playback position
  • Screenshot Button: Capture frames during playback

Working with the Timeline​

Moving Animations

  • Drag animation blocks left or right to change start time
  • Enter an exact Delay value in the animation settings for precise timing

Adjusting Duration

  • Drag the bar to change its start time.
  • Select the bar and drag the right resize handle to change duration.
  • Use the animation settings for exact timing.

Selecting Animations

  • Click an animation block to select it
  • Selected animations show their controls in the right panel

Deleting Animations

  • Select an animation and press Delete
  • Or click the delete button in the controls panel

Animation Properties​

Every animation has configurable properties that appear as controls in the right panel when the animation is selected.

Essential Properties​

Enabled​

  • Toggle animations on/off without deleting them
  • Useful for testing different combinations

Start Value / End Value​

  • Define the beginning and ending states
  • Examples:
    • Move X: Start at 0, End at 100 (moves right 100 pixels)
    • Opacity: Start at 1, End at 0 (fade out)
    • Scale: Start at 1, End at 2 (doubles in size)

Speed (Duration)​

  • How long the animation takes to complete
  • Range: 0.1 to 20 seconds
  • Lower values = faster animation
  • Higher values = slower animation

Delay​

  • Wait time before animation starts
  • Range: 0 to 100 seconds
  • Great for sequential animations

Delay Once​

  • When enabled, delay only applies to the first loop
  • Subsequent loops start immediately
  • Perfect for intro sequences that then loop continuously

Loop and Repeat Options​

Loop​

  • When enabled, animation repeats indefinitely
  • When disabled, animation plays once then stops

Yoyo Effect​

  • Reverses animation direction on each repeat
  • Creates back-and-forth motion
  • Only works when Loop is enabled
  • Example: Element moves right, then moves left, then right again

Use Cases for Yoyo:

  • Floating/hovering effects
  • Pulsing scale animations
  • Swaying motion
  • Breathing effects

Easing Functions​

Easing functions control the acceleration and deceleration of animations, making them feel more natural and dynamic.

Understanding Easing​

Without easing, animations move at constant speed (linear). With easing, animations can:

  • Start slow and speed up (ease in)
  • Start fast and slow down (ease out)
  • Both (ease in-out)

Available Easing Functions​

None​

  • Linear motion, constant speed
  • Mechanical, precise movement

Power (1-4)​

  • Gradual acceleration/deceleration
  • Power 1: Subtle
  • Power 4: Dramatic
  • Variants: In, Out, InOut

Back​

  • Overshoots target then settles back
  • Creates anticipation or follow-through
  • Great for attention-grabbing effects

Bounce​

  • Bouncing effect at the end
  • Like a ball hitting the ground
  • Playful and energetic

Circle​

  • Circular acceleration curve
  • Smooth, graceful motion
  • Professional feel

Elastic​

  • Spring-like oscillation
  • Wobbles before settling
  • Dramatic, eye-catching

Expo (Exponential)​

  • Very dramatic acceleration
  • Explosive motion
  • High-impact effects

Sine​

  • Smooth, gentle curves
  • Most natural-looking motion
  • Versatile for any animation

Steps​

  • Discrete jumps instead of smooth motion
  • Retro, pixel-art style
  • Stop-motion effect

Easing Variants​

For a timing shape beyond the named choices, see Custom Easing Curves. The Builder includes two draggable handles and exact number fields in Properties.

Most easing functions have three variants:

  • In: Animation starts slow, ends fast
  • Out: Animation starts fast, ends slow (most common)
  • InOut: Animation starts slow, speeds up, then slows down

Choosing the Right Variant:

  • In: When element enters the scene
  • Out: When element exits or comes to rest (most natural)
  • InOut: For complete animations that stay on screen

Animation Workflow Tips​

Planning Your Animations​

  1. Sketch First: Plan what you want to animate before starting
  2. Start Simple: Add basic motion first, enhance later
  3. Layer Animations: Build complex effects by combining simple animations

Building Complex Animations​

Combine multiple animation types on one layer:

Layer: Logo
  ├─ Move Y (drop from top)
  ├─ Scale (grow slightly)
  ├─ Rotation (spin during drop)
  └─ Opacity (fade in)

All these can run simultaneously or sequentially using delays.

Timing Strategies​

Simultaneous Animations

  • Set same start time for all animations
  • Creates complex motion from simple parts

Sequential Animations

  • Use delays to stagger animations
  • Calculation: Second animation delay = First animation speed
  • Example: First animation at 0s (2s duration), second at 2s delay

Overlapping Animations

  • Start second animation before first completes
  • Creates smooth transitions
  • Example: Fade in starts at 0.5s while move completes at 1s

Testing Your Animations​

Preview Controls​

  • Space while paused: start preview outside a text field. Use the playback buttons to pause and stop.
  • Stop Button: Reset to beginning
  • Timeline Scrubbing: Drag playhead to specific time

What to Look For​

  • Smoothness: Is motion fluid or jerky?
  • Timing: Does animation complete in expected time?
  • Loops: Do repeating animations cycle correctly?
  • Sync: Do multiple animations coordinate properly?

Common Issues​

Animation too fast: Increase speed value Animation too slow: Decrease speed value Choppy motion: Try different easing function Doesn't loop smoothly: Enable yoyo or adjust end values Wrong start time: Drag animation block on timeline

Performance Considerations​

Keep It Smooth​

  • Limit active animations: Too many simultaneous animations can slow playback
  • Use simpler animations: Basic animations perform better than complex shaders
  • Optimize assets: Large images take longer to animate

Mobile Performance​

If your theme targets mobile devices:

  • Reduce number of simultaneous animations
  • Use basic animations over advanced effects
  • Test on target device when possible

Animation Best Practices​

  1. Natural Motion: Use easing functions (avoid "None" for most animations)
  2. Subtle Effects: Less is often more; don't over-animate
  3. Consistent Style: Use similar animation types throughout theme
  4. Purposeful Animation: Every animation should enhance user experience
  5. Test Loops: Ensure looping animations cycle smoothly
  6. Mind Duration: 0.5-2 seconds is ideal for most UI animations
  7. Preview Often: Constantly preview to catch issues early

Quick Reference​

PropertyTypical ValuePurpose
Speed0.5-2sUI animations
Speed2-5sAmbient effects
Speed0.1-0.3sMicro-interactions
Delay0sImmediate start
Delay0.1-0.5sSlight stagger
EasingPower.OutGeneral motion
EasingBack.OutAttention-grabbing
EasingElastic.OutPlayful effects

Next Steps​

Now that you understand animation basics, dive deeper into specific animation types:

Pro Tip: Create a test project where you try each animation type with different settings. This hands-on experimentation is the best way to learn what each animation can do!