Use Animations

1. Common entrance animations

Fade in:

{
  "animations": [
    { "type": "fadeIn", "duration": 0.4 }
  ]
}

Slide in:

{
  "animations": [
    {
      "type": "slideIn",
      "direction": "up",
      "distance": 120,
      "duration": 0.6
    }
  ]
}

Zoom in:

{
  "animations": [
    {
      "type": "zoomIn",
      "duration": 0.5,
      "easing": "easeOutBack"
    }
  ]
}

2. Continuous motion

{
  "animations": [
    {
      "type": "scale",
      "from": 1,
      "to": 1.08,
      "duration": 0.8,
      "loop": true,
      "easing": "easeInOutSine"
    }
  ]
}

3. Combine animations carefully

It is normal to combine:

fadeIn + slideIn
fadeIn + zoomIn
scale + move

Avoid stacking too many entrance effects on the same clip unless the style calls for it.

4. Keyframes vs animations

Use animations when:

you want a named motion preset
you want faster authoring

Use keyframes when:

you need exact value changes at exact times
you need custom property curves

Full timing reference: Animation, Keyframes, and Transitions
Working snippets: Examples

Use Animations

1. Common entrance animations

2. Continuous motion

3. Combine animations carefully

4. Keyframes vs animations

5. Related docs

On this page