https://github.com/nicolasdelfino/tracks

A minimalistic library for animating elements as they mount / unmount.
https://github.com/nicolasdelfino/tracks

animation-library inject-css mutation-observer

Last synced: about 1 month ago
JSON representation

A minimalistic library for animating elements as they mount / unmount.

• Host: GitHub
• URL: https://github.com/nicolasdelfino/tracks
• Owner: nicolasdelfino
• Created: 2019-01-23T22:23:29.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T16:07:04.000Z (almost 2 years ago)
• Last Synced: 2024-10-05T12:36:04.003Z (about 2 months ago)
• Topics: animation-library, inject-css, mutation-observer
• Language: JavaScript
• Homepage:
• Size: 391 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        






# 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:

```js

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:

```js

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

```js

// 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)

```js

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