Variable AnimationUtilsConst

AnimationUtils: {
    animate(element, properties, duration?, easing?): Promise<void>;
    animateWithRAF(element, properties, duration?, easing?): Promise<void>;
    createKeyframeAnimation(element, keyframes, options?): Animation;
    createSpringAnimation(element, properties, options?): Promise<void>;
    getAnimations(element): Animation[];
    getAnimationState(element): "idle" | "running" | "paused";
    hasAnimations(element): boolean;
    pauseAnimations(element): void;
    resumeAnimations(element): void;
    reverseAnimations(element): void;
    stopAnimations(element): void;
    waitForAnimations(element): Promise<void>;
} = ...

Type declaration

  • animate:function
    • animate(element, properties, duration?, easing?): Promise<void>

    • Animates an element using CSS transitions

      Parameters

      • element: HTMLElement

        The HTML element to animate

      • properties: Partial<CSSStyleDeclaration>

        CSS properties to animate

      • duration: number = 300

        Animation duration in milliseconds (default: 300)

      • easing: string = "ease"

        CSS easing function (default: 'ease')

      Returns Promise<void>

      Promise that resolves when animation completes

      Example

      const element = document.querySelector('.box');
      await AnimationUtils.animate(element, {
        transform: 'translateX(100px)',
        opacity: '0.5'
      }, 500, 'ease-in-out');
  • animateWithRAF:function
    • animateWithRAF(element, properties, duration?, easing?): Promise<void>

    • Animates an element using requestAnimationFrame for smoother animations

      Parameters

      • element: HTMLElement

        The HTML element to animate

      • properties: Partial<CSSStyleDeclaration>

        CSS properties to animate

      • duration: number = 300

        Animation duration in milliseconds (default: 300)

      • easing: ((t) => number) = ...

        Custom easing function (default: linear)

          • (t): number

          • Parameters

            • t: number

            Returns number

      Returns Promise<void>

      Promise that resolves when animation completes

      Example

      const element = document.querySelector('.box');
      await AnimationUtils.animateWithRAF(element, {
        transform: 'translateX(100px)'
      }, 500, (t) => t * t); // Quadratic easing
  • createKeyframeAnimation:function
    • createKeyframeAnimation(element, keyframes, options?): Animation

    • Creates a keyframe animation using the Web Animations API

      Parameters

      • element: HTMLElement

        The HTML element to animate

      • keyframes: Keyframe[]

        Array of keyframe objects

      • options: KeyframeAnimationOptions = {}

        Animation options

      Returns Animation

      Animation object

      Example

      const element = document.querySelector('.box');
      const animation = AnimationUtils.createKeyframeAnimation(element, [
        { transform: 'translateX(0)', opacity: 1 },
        { transform: 'translateX(100px)', opacity: 0.5 }
      ], {
        duration: 500,
        easing: 'ease-in-out'
      });
  • createSpringAnimation:function
    • createSpringAnimation(element, properties, options?): Promise<void>

    • Creates a spring physics-based animation

      Parameters

      • element: HTMLElement

        The HTML element to animate

      • properties: Partial<CSSStyleDeclaration>

        CSS properties to animate

      • options: SpringOptions = {}

        Spring animation configuration

      Returns Promise<void>

      Promise that resolves when animation completes

      Example

      const element = document.querySelector('.box');
      await AnimationUtils.createSpringAnimation(element, {
        transform: 'translateY(200px)'
      }, {
        stiffness: 170,
        damping: 26,
        mass: 1
      });
  • getAnimations:function
    • getAnimations(element): Animation[]

    • Gets all animations currently running on an element

      Parameters

      • element: HTMLElement

        The HTML element to check

      Returns Animation[]

      Array of Animation objects

      Example

      const element = document.querySelector('.box');
      const animations = AnimationUtils.getAnimations(element);
  • getAnimationState:function
    • getAnimationState(element): "idle" | "running" | "paused"

    • Gets the current animation state of an element

      Parameters

      • element: HTMLElement

        The HTML element to check

      Returns "idle" | "running" | "paused"

      Current animation state: 'idle', 'running', or 'paused'

      Example

      const element = document.querySelector('.box');
      const state = AnimationUtils.getAnimationState(element);
      if (state === 'running') {
        console.log('Element is currently animating');
      }
  • hasAnimations:function
    • hasAnimations(element): boolean

    • Checks if an element has any active animations

      Parameters

      • element: HTMLElement

        The HTML element to check

      Returns boolean

      True if the element has any animations

      Example

      const element = document.querySelector('.box');
      if (AnimationUtils.hasAnimations(element)) {
        console.log('Element has active animations');
      }
  • pauseAnimations:function
    • pauseAnimations(element): void

    • Pauses all animations on an element

      Parameters

      • element: HTMLElement

        The HTML element to pause animations on

      Returns void

      Example

      const element = document.querySelector('.box');
      AnimationUtils.pauseAnimations(element);
  • resumeAnimations:function
    • resumeAnimations(element): void

    • Resumes all paused animations on an element

      Parameters

      • element: HTMLElement

        The HTML element to resume animations on

      Returns void

      Example

      const element = document.querySelector('.box');
      AnimationUtils.resumeAnimations(element);
  • reverseAnimations:function
    • reverseAnimations(element): void

    • Reverses the direction of all animations on an element

      Parameters

      • element: HTMLElement

        The HTML element to reverse animations on

      Returns void

      Example

      const element = document.querySelector('.box');
      AnimationUtils.reverseAnimations(element);
  • stopAnimations:function
    • stopAnimations(element): void

    • Stops and removes all animations from an element

      Parameters

      • element: HTMLElement

        The HTML element to stop animations on

      Returns void

      Example

      const element = document.querySelector('.box');
      AnimationUtils.stopAnimations(element);
  • waitForAnimations:function
    • waitForAnimations(element): Promise<void>

    • Waits for all animations on an element to complete

      Parameters

      • element: HTMLElement

        The HTML element to wait for

      Returns Promise<void>

      Promise that resolves when all animations complete

      Example

      const element = document.querySelector('.box');
      await AnimationUtils.waitForAnimations(element);
      console.log('All animations completed');

Settings

Member Visibility

Theme