Basic Animations
Use basic animations to control position, scale, opacity, and rotation. Start with one effect, preview, then adjust the values.
Basic animation examples
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!