Animation Basics

Animations bring your themes to life. HyperTheme provides a powerful yet intuitive animation system with over 60 animation types, timeline control, and extensive customization options.

Understanding the Animation System

Three Ways to Add 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. Timeline Context Menu: Right-click on the timeline for additional options

Animation Categories

HyperTheme organizes animations into four categories:

• Basic Animations (12 types) - Fundamental transforms like move, scale, rotate
• Preset Animations (23 types) - Ready-to-use effects like bounce, swing, grow
• Filter Animations (7 types) - Visual effects like blur, pixelate, grayscale
• Advanced Effects (21 types) - 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===]   📷       │
│                                                          │
│ Layer 1  ░░░░░░░░░░░░                                   │
│ Layer 2      ░░░░░░░░░░░░░                              │
│ Layer 3                   ░░░░░░                        │
└─────────────────────────────────────────────────────────┘

• 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
• Snap to markers for precise alignment

Adjusting Duration

• Drag the left edge to change start time
• Drag the right edge to change end time
• Drag both to extend or shorten the animation

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

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

• Spacebar: Play/pause animation preview
• 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

Property	Typical Value	Purpose
Speed	0.5-2s	UI animations
Speed	2-5s	Ambient effects
Speed	0.1-0.3s	Micro-interactions
Delay	0s	Immediate start
Delay	0.1-0.5s	Slight stagger
Easing	Power.Out	General motion
Easing	Back.Out	Attention-grabbing
Easing	Elastic.Out	Playful effects

Next Steps

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

• Basic Animations - Move, scale, rotate, opacity
• Preset Animations - Bounce, swing, grow effects
• Filter Animations - Blur, pixelate, color effects
• Advanced Effects - Shaders and special effects

---

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!