Skip to content

Supported Animation Types

Animation Categories

There are three different categories of animations: In, Out and Loop animations.

In Animations

In animations animate a block for a specified duration after the block first appears in the scene. For example, if a block has a time offset of 4s in the scene and it has an In animation with a duration of 1s, then the appearance of the block will be animated between 4s and 5s with the In animation.

Out Animations

Out animations animate a block for a specified duration before the block disappears from the scene. For example, if a block has a time offset of 4s in the scene and a duration of 5s and it has an Out animation with a duration of 1s, then the appearance of the block will be animated between 8s and 9s with the Out animation.

Loop Animations

Loop animations animate a block for the total duration that the block is visible in the scene. Loop animations also run simultaneously with In and Out animations, if those are present.

Animation Presets

We currently support the following In and Out animation presets:

  • '//ly.img.ubq/animation/slide'
  • '//ly.img.ubq/animation/pan'
  • '//ly.img.ubq/animation/fade'
  • '//ly.img.ubq/animation/blur'
  • '//ly.img.ubq/animation/grow'
  • '//ly.img.ubq/animation/zoom'
  • '//ly.img.ubq/animation/pop'
  • '//ly.img.ubq/animation/wipe'
  • '//ly.img.ubq/animation/baseline'
  • '//ly.img.ubq/animation/crop_zoom'
  • '//ly.img.ubq/animation/spin'
  • '//ly.img.ubq/animation/ken_burns'
  • '//ly.img.ubq/animation/typewriter_text' (text-only)
  • '//ly.img.ubq/animation/block_swipe_text' (text-only)
  • '//ly.img.ubq/animation/merge_text' (text-only)
  • '//ly.img.ubq/animation/spread_text' (text-only)

and the following Loop animation types:

  • '//ly.img.ubq/animation/spin_loop'
  • '//ly.img.ubq/animation/fade_loop'
  • '//ly.img.ubq/animation/blur_loop'
  • '//ly.img.ubq/animation/pulsating_loop'
  • '//ly.img.ubq/animation/breathing_loop'
  • '//ly.img.ubq/animation/jump_loop'
  • '//ly.img.ubq/animation/squeeze_loop'
  • '//ly.img.ubq/animation/sway_loop'