Search
Loading...
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'