Animate dom elements using the web animation api. https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API This set of animations is just a few opinionated animations which currently include things like fading or translateY. You can either run them on a group, or individually. Configuration can be passed directly, or applied to data attributes on the target element. Data attributes to be placed on the element if not using the options object are: data-animation-delay, data-animation-duration, data-animation-easing, data-animation-types, data-translate-distance-from, data-translate-distance-to.

Since
  • 1.5.0
Source

Methods

(inner) end(target, options)

End the animation.

Parameters:
NameTypeDescription
targetHTMLElement

The target element to animate.

optionsobject

The options for the animation that are needed to determine what type of properties are applied to the element at the end of the animation.

Properties
NameTypeDescription
distanceTostring

The distance to end the translateY animation at if supplied as type.

opacityTostring

The opacity value to animate to for fadeIn or fadeOut types.

typesstring

The types of animations to handle. Supports fadeIn, fadeOut, and translateY.

Since
  • 1.5.0
Source

(inner) getAnimationKeyframes(target, options) → {Array}

Get the keyframes for the animation. Follows this format https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats

Parameters:
NameTypeDescription
targetHTMLElement

The target element to animate.

optionsobject

The options for the animation that are needed to form the Keyframe object.

Properties
NameTypeDescription
distanceFromstring

The distance to travel for translateY if supplied as type.

distanceTostring

The distance to travel for translateY if supplied as type.

opacityFromstring

The opacity value to animate from for fadeIn or fadeOut types.

opacityTostring

The opacity value to animate to for fadeIn or fadeOut types.

typesstring

The types of animations to run. Supports fadeIn, fadeOut, and translateY. You can mix them as space seperated values.

Since
  • 1.5.0
Source
Returns:

The Keyframe objects.

Type: 
Array

(inner) run(target, options) → {void}

Animate a single element.

Parameters:
NameTypeDescription
targetHTMLElement

The target element to animate.

optionsobject

The options for the animation that are needed to determine what type of properties are applied to the element at the end of the animation.

Properties
NameTypeDescription
onAnimateInitfunction

Function to run when initializing animation.

onAnimateStartfunction

Function to run at the beginning of the animation.

onAnimateEndfunction

Function to run at the end of the animation.

delaynumber

Delay for the animation in milliseconds.

distancestring | number

The distance to travel in pixels for translateY if supplied as type.

durationnumber

Duration for the animation in milliseconds.

easingstring

Easing for the animation. Supports ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, steps(), cubic-bezier().

typesstring

The types of animations to run. Supports fadeIn, fadeOut, and translateY. You can mix them as space seperated values.

Since
  • 1.5.0
Source
Returns:
Type: 
void
Example
import { animate } from '@gravityforms/utils';

  const animateExample = () => {
    const logo = getNode( '.gform-splash__header .gform-logo', document, true );

    animate.run( logo, {
      types: 'fadeIn translateY',
      distanceFrom: '-50px',
      distanceTo: '0px',
      duration: 1000,
      easing: 'ease-in-out',
      delay: 500,
      onInit: () => {
        console.log( 'Animation initializing!' );
      },
      onAnimateStart: () => {
        console.log( 'Animation starting!' );
      },
      onAnimateEnd: () => {
        console.log( 'Animation complete!' );
      },
    } );
  };

(inner) runGroup(entries) → {void}

Animate a group of elements.

Parameters:
NameTypeDescription
entriesArray

The elements to animate. An array containing a target entry and an options entry that follows the structure of the run function options object.

Since
  • 1.5.0
Source
Returns:
Type: 
void
Example
import { animate } from '@gravityforms/utils';

  const animateExample = () => {
    const logo = getNode( '.gform-splash__header .gform-logo', document, true );
    const heading = getNode( '.gform-splash__header h1', document, true );
    const text = getNode( '.gform-splash__header p', document, true );
    const button = getNode( '.gform-splash__header .gform-button', document, true );
    const reviews = getNode( '.gform-splash__header .gform-reviews', document, true );

    const defaults = {
      onAnimateEnd: () => {
        console.log( `hello from: ${ performance.now() }` );
      },
      distance: -20,
      duration: 600,
      easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
      types: 'fadeIn translateY',
    };
    animate.runGroup( [
      { target: logo, options: { ...defaults } },
      { target: heading, options: { callback: defaults.callback } }, // this one uses data attributes or internal defaults instead since no options where passed here.
      { target: text, options: { ...defaults, delay: 200 } },
      { target: button, options: { ...defaults, delay: 300 } },
      { target: reviews, options: { ...defaults, delay: 400 } },
    ] );
  };