Basic Animations
Basic animations are the fundamental building blocks of motion in HyperTheme. These 12 essential animation types control position, size, visibility, and orientation of your theme elements.
The 12 Basic Animation Types
1. Move X (Horizontal Movement)
Moves elements left or right along the X axis.
Properties:
- Start Value: Starting X position (pixels from left edge)
- End Value: Ending X position
- Positive values: Move right
- Negative values: Move left
Use Cases:
- Slide-in menus from left or right
- Scrolling credits
- Wheel item movement
- Horizontal reveals
Example Settings:
Start Value: -200 (off screen left)
End Value: 0 (center)
Speed: 1.5s
Easing: Power2.Out
Result: Element slides in from left edge
2. Move Y (Vertical Movement)
Moves elements up or down along the Y axis.
Properties:
- Start Value: Starting Y position (pixels from top edge)
- End Value: Ending Y position
- Positive values: Move down
- Negative values: Move up
Use Cases:
- Drop-down notifications
- Rising elements
- Vertical scrolling text
- Elevator-style transitions
Example Settings:
Start Value: -100 (above screen)
End Value: 50 (visible position)
Speed: 1.0s
Easing: Bounce.Out
Result: Element drops from top with bounce
Pro Tip: Combine Move X and Move Y for diagonal motion!
3. Scale (Size Changes)
Grows or shrinks elements uniformly.
Properties:
- Start Value: Starting scale (1 = 100% original size)
- End Value: Ending scale
- Values > 1: Grow larger
- Values < 1: Shrink smaller
- 0: Completely collapsed
Use Cases:
- Zoom-in introductions
- Pulse effects with loop + yoyo
- Shrink-away exits
- Selection highlights
Example Settings:
Start Value: 0
End Value: 1
Speed: 0.8s
Easing: Back.Out
Loop: false
Result: Element grows from nothing with bounce effect
Pulsing Effect:
Start Value: 1
End Value: 1.1
Speed: 1.0s
Easing: Sine.InOut
Loop: true
Yoyo: true
Result: Element pulses between 100% and 110% size continuously
4. Opacity (Transparency)
Controls transparency from invisible to fully visible.
Properties:
- Start Value: Starting opacity (0-1)
- End Value: Ending opacity (0-1)
- 0: Completely transparent (invisible)
- 1: Completely opaque (fully visible)
- 0.5: 50% transparent
Use Cases:
- Fade-in introductions
- Fade-out exits
- Ghosting effects
- Cross-fades
- Subtle reveals
Fade In:
Start Value: 0
End Value: 1
Speed: 1.5s
Easing: None (linear fade works well)
Fade Out:
Start Value: 1
End Value: 0
Speed: 1.0s
Easing: None
Blinking Effect:
Start Value: 1
End Value: 0.3
Speed: 0.5s
Loop: true
Yoyo: true
Result: Element flashes between visible and dim
5. Rotation (Spinning)
Rotates elements around their center point (anchor).
Properties:
- Start Value: Starting rotation (degrees)
- End Value: Ending rotation (degrees)
- Positive values: Clockwise rotation
- Negative values: Counter-clockwise rotation
- 360: Complete rotation
Use Cases:
- Spinning wheels or gears
- Tilting effects
- Loading indicators
- Playful motion
Single Spin:
Start Value: 0
End Value: 360
Speed: 2.0s
Easing: None (constant spin)
Loop: false
Continuous Rotation:
Start Value: 0
End Value: 360
Speed: 3.0s
Easing: None
Loop: true
Delay Once: true
Result: Spins forever at constant speed
Wiggle Effect:
Start Value: -15
End Value: 15
Speed: 0.8s
Easing: Sine.InOut
Loop: true
Yoyo: true
Result: Rocks back and forth gently
Pro Tip: Change the anchor point (pivot) in Properties to rotate around different points!
6. Flip X (Horizontal Flip)
Flips elements horizontally (mirror effect).
Properties:
- Start Value: Starting flip state (0 or 1)
- End Value: Ending flip state (0 or 1)
- 0: Normal orientation
- 1: Flipped horizontally
Use Cases:
- Card flip reveals
- Mirror effects
- Direction changes
- Playful transitions
Instant Flip:
Start Value: 0
End Value: 1
Speed: 0.3s
Easing: None
Smooth Flip Animation:
Start Value: 0
End Value: 1
Speed: 0.6s
Easing: Power2.InOut
Flapping Effect:
Start Value: 0
End Value: 1
Speed: 0.4s
Loop: true
Yoyo: true
7. Flip Y (Vertical Flip)
Flips elements vertically (upside down).
Properties:
- Start Value: Starting flip state (0 or 1)
- End Value: Ending flip state (0 or 1)
- 0: Normal orientation
- 1: Flipped vertically
Use Cases:
- Upside-down reveals
- Falling card effects
- Reflection simulation
- Dramatic transitions
Settings are similar to Flip X
Pro Tip: Combine Flip X + Flip Y + Rotation for complex 3D-like effects!
8. Skew X (Horizontal Tilt)
Tilts elements horizontally, creating a slanted effect.
Properties:
- Start Value: Starting skew angle (degrees)
- End Value: Ending skew angle (degrees)
- Positive values: Tilt right
- Negative values: Tilt left
Use Cases:
- Italic-style emphasis
- Wind-blown effects
- Speed lines simulation
- Stylized transitions
Subtle Slant:
Start Value: 0
End Value: 10
Speed: 0.5s
Easing: Power1.Out
Wobble Effect:
Start Value: -8
End Value: 8
Speed: 0.6s
Easing: Sine.InOut
Loop: true
Yoyo: true
9. Skew Y (Vertical Tilt)
Tilts elements vertically.
Properties:
- Start Value: Starting skew angle (degrees)
- End Value: Ending skew angle (degrees)
- Positive values: Tilt down
- Negative values: Tilt up
Use Cases:
- Perspective effects
- Falling motion simulation
- Artistic distortion
- Dynamic emphasis
Settings are similar to Skew X
10. Hover (Floating Effect)
Creates a floating or hovering motion.
Properties:
- Start Value: Starting Y offset
- End Value: Ending Y offset
- Range: Vertical distance to float
Use Cases:
- Floating platforms
- Levitating objects
- Idle animations
- Breathing effects
Gentle Float:
Start Value: 0
End Value: 20
Speed: 2.0s
Easing: Sine.InOut
Loop: true
Yoyo: true
Result: Smoothly floats up and down 20 pixels
Pro Tip: Combine with slight rotation for more natural floating!
11. Scroll X (Horizontal Scrolling)
Scrolls texture horizontally (for tiling images).
Properties:
- Start Value: Starting scroll position
- End Value: Ending scroll position
- Work On: Choose Object or Texture
- Object: Moves the entire object
- Texture: Scrolls the texture inside the object (for tiling sprites)
Use Cases:
- Scrolling backgrounds
- Moving clouds
- Conveyor belts
- Parallax effects
Continuous Scroll:
Start Value: 0
End Value: 1 (or image width for object)
Speed: 10.0s
Easing: None
Loop: true
Important: For texture scrolling, the image must be set to tile/repeat!
12. Scroll Y (Vertical Scrolling)
Scrolls texture vertically.
Properties:
- Start Value: Starting scroll position
- End Value: Ending scroll position
- Work On: Choose Object or Texture
Use Cases:
- Rising smoke
- Falling rain/snow
- Scrolling credits
- Waterfall effects
Settings are similar to Scroll X
Combining Basic Animations
The real power comes from combining multiple basic animations on a single layer.
Example 1: Dramatic Entrance
Move Y: -100 → 0 (0.8s, Bounce.Out)
Opacity: 0 → 1 (0.8s, None)
Scale: 0.5 → 1 (0.8s, Back.Out)
Result: Element drops in, fades in, and grows simultaneously
Example 2: Exit Stage Left
Move X: 0 → -500 (1.0s, Power2.In)
Rotation: 0 → -90 (1.0s, Power2.In)
Opacity: 1 → 0 (1.0s, None)
Result: Element slides left, rotates, and fades out
Example 3: Attention Grabber
Scale: 1 → 1.2 → 1 (0.6s, Back.Out, Yoyo, Loop)
Rotation: -5 → 5 (0.8s, Sine.InOut, Yoyo, Loop)
Opacity: 1 → 0.8 (1.0s, Sine.InOut, Yoyo, Loop)
Result: Element pulses, wobbles, and breathes continuously
Animation Timing Patterns
Simultaneous (0 delay on all)
All animations start together, creating unified complex motion.
Sequential (Cascading delays)
Animation 1: Delay 0s, Speed 1s
Animation 2: Delay 1s, Speed 1s
Animation 3: Delay 2s, Speed 1s
Animations play one after another.
Staggered Overlap
Animation 1: Delay 0s, Speed 2s
Animation 2: Delay 0.5s, Speed 2s
Animation 3: Delay 1s, Speed 2s
Animations overlap for smooth transitions.
Best Practices for Basic Animations
- Start Simple: Use one or two animations before adding more
- Natural Easing: Almost always use easing (avoid "None" except for specific effects)
- Consistent Speed: Use similar speeds for related elements
- Respect Physics: Make motion feel believable
- Test Loops: Ensure start and end values create smooth loops
- Anchor Awareness: Remember rotation and scale use the anchor point
- Combine Thoughtfully: More animations ≠ better; be purposeful
Common Mistakes to Avoid
Too Fast
- Basic UI animations: 0.5-2s is ideal
- Anything under 0.3s may feel jarring
Wrong Easing
- Linear motion (None) usually feels mechanical
- Use Power2.Out as a safe default
Forgetting Delays
- Sequential animations need delays to work
- Calculate: Second delay = First animation speed
Extreme Values
- Subtle effects (10-20% change) often look better than dramatic ones
- Test with different values to find the sweet spot
Poor Loop Closure
- If Start = 0 and End = 100, next loop jumps back to 0
- Use Yoyo to avoid this, or design values that connect smoothly
Quick Reference Table
| Animation | Start | End | Use Case | Speed | Easing |
|---|---|---|---|---|---|
| Fade In | 0 | 1 | Appear | 1.0s | None |
| Fade Out | 1 | 0 | Disappear | 0.8s | None |
| Slide In Right | -200 | 0 | Enter | 1.2s | Power2.Out |
| Slide Out Left | 0 | -200 | Exit | 0.8s | Power2.In |
| Grow In | 0 | 1 | Introduce | 1.0s | Back.Out |
| Pulse | 1 | 1.1 | Attention | 1.0s | Sine (Yoyo) |
| Spin Once | 0 | 360 | Rotate | 2.0s | None |
| Float | 0 | 20 | Hover | 2.0s | Sine (Yoyo) |
Next Steps
- Preset Animations - Pre-configured animation combinations
- Animation Timeline - Advanced timeline techniques
- Best Practices - Professional animation tips
Practice Exercise: Create a logo that fades in, grows, and drops from the top simultaneously. Then make it pulse continuously. This will teach you simultaneous animations and looping!