Animation
      Back to home
      1. Knowledge Base
      2. Design Tokens
      3. Animation

      Animation Style

      Add global animation styles for use throughout your site

      Types

      There are currently 2 types of animation in Nyla
      1. Appear animation: Trigger when the item becomes visible, or when it passes a specific point
      2. Trigger at a specific point: Trigger at a specific pixel value
      Animation.png

      Settings

      Offset

      The offset setting is the location of the animation ‘trigger’, or where the animation starts.

      Threshold

      The threshold is the percent of the object that has passed the trigger before starting the animation:
      • 0%: When the object hits the trigger location
      • 100%: The entire object has passed the trigger before starting the animation

      Timing

      Speed - Set how long the animation will take
      Delay - Set a delay before the animation starts
      Easing - Set the animation easing

      Effects

      Nyla currently supports 4 key animation effects:
      1. Move
      2. Opacity
      3. Scale
      4. Rotate