Skip to content

nicolasdelfino/tracks

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

tracks.js

Description:

Tracks animates DOM elements from one state to another by temporarily injecting styles (Tracks.fromTo), its real strength is its capability to listen to the creation and deletion of DOM elements by using the MutationObserver API (Tracks.on).

2.61kb gzipped

CodeSandbox demo

https://codesandbox.io/s/2j323l98j

Methods

Tracks.on (selector / mount fn -> el / unmount fn -> el)

Can be used in two ways, if you don't need to latch on the unmount hook just return the fromTo animation:

Tracks.on(
  selector,
  async el => {
    await Tracks.fromTo(el, stateA, stateB, 0.5);
    console.log('Tracks - add animation complete!');
  },
  el => Tracks.fromTo(el, stateB, stateA, 0.5), // <- return animation to Tracks
);

If you do care, return an object that contains an animation property and an onComplete method:

Tracks.on(
  selector,
  async el => {
    await Tracks.fromTo(el, stateA, stateB, 0.5);
    console.log('Tracks - add animation complete');
  },
  el => ({
    animation: Tracks.fromTo(el, stateB, stateA, 0.5),
    onComplete: () => {
      console.log('Tracks - external - on complete done');
    },
  }),
);
Tracks.fromTo

Animates an element from one state to another

// states
const stateA = { width: 0, height: 0, opacity: 0 };
const stateB = { width: 100, height: 100, opacity: 1 };

Tracks.fromTo(selector, stateB, stateA, 0.5)
Tracks.reverse

Reverse the latest animation made with Tracks (flips states).

Tracks.getList

Outputs elements that have been animated with Tracks.

Config (optional)

A config may be provided to output internal Tracks logs or to set the default ease (default is linear)

window.TracksConfig = {
  logs: true / false,
  ease: 'easeOutQuint',
};

Supported easing values

linear easeInSine easeOutSine easeInOutSine easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack