IOP Motion animation library guide

Purpose

IOP Motion aims to facilitate the creation of robust, simple and performant common animations that enhance the user experience.

The unique animation sequence feature enables smart one-at-a-time animations that work on any device at any breakpoint.

Technical Overview

IntersectionObserver sits at the heart of the implementation.

Various selectors can be grouped into animation sequences, so as to enable smooth animations regardless of the given DOM context.

Detaching animations from the DOM is made possible by utilizing a JS-based configuration object, instead of relying on html classes.

However, for ease of use, classes and attributes can still be used to quickly tweak animations settings, as presented below.

In scenarios where the user lands on a scrolled down page (such as visiting an achor link), all animations above the visible area will be disabled.

Installlation

1. Clone the src/assets/js/lib/ folder into your project;
2. One level above lib/, create an animations.js file;
3. Next, copy the sass/lib/iopmotion._scss file into your project;
4. All done!

Usage

The library can be configured either via JS (recommended) or using html data attributes.

JavaScript Usage

Previously, we created an animations.js file. The moveTargets array will contain objects for all our animations configurations.

Example

    const moveTargets = [
      {
        sel: '.myParagraph', // JS selector, selects all elements with the class .myParagraph
        effect: 'fade-right', // applies the `fade-up` effect on selected elements
        distance: 40, // specifies the amount of movement for fade/slide effects (in px)
        duration: 1000, // specifies the duration time of the animation (in ms)
        delay: 0 // applies a delay between the time the elements enter the viewport and the animation start
      }
    ]
  

HTML Usage

The same as above can be accomplished through adding html data-attributes on the desired elements.

Example

    <p data-motion-effect="fade-right" data-motion-distance="40" data-motion-duration="1000" data-motion-delay="0">My paragraph«/p>
  

Result

Sequencing Usage

Currently, sequences can only be set in JS.

Sequences enable one-after-the-other animations.

Named sequences enable multiple config objects to belong in the same sequence group.

(!) In the case of sequences, delay applies to the first element in a sequence and sequenceDelay represents the amount of delay between elements.

Example

    const moveTargets = [
      {
        sel: '.myParagraph', // selects all elements with the class .myParagraph
        effect: 'fade-right', // applies the `fade-up` effect on selected elements
        distance: 40, // specifies the amount of movement for fade/slide effects (in px)
        duration: 1000, // specifies the duration time of the animation (in ms)
        delay: 0, // applies a delay between the time the elements enter the viewport and the animation start

        sequence: 'mySequence',
        sequenceDelay: 500
      }
    ]
  

Default Configuration

Default settings are set in iopmotion_config.js

As a shortcut, any selector containing the [data-motion] attribute will be added to the targets list by default.