G

🌺🍃 G is a garden of small JavaScript utilities.

Installation

npm install @mystroken/g

Usage

Look at the sources files for more information.

Import

// Import the whole library.
import G from '@mystroken/g';

// OR import individual helper - like lodash he he ;-)
import Raf from '@mystroken/g/Raf'; 

Create a 60FPS loop.

const rAF = new Raf(elapsed => console.log(elapsed));
rAF.run();

Call a func after a certain delay.

const duration = 2000;
const callback = () => console.log(`Call me ${duration}ms later`);
const delay = new G.Delay(callback, duration);
delay.run();

Animate things

const anim = animate({
    el: '#loader', // Select the element to animate.
    d: 2000, // Set the animation duration in ms.
    // Set properties to animate.
    p: {
        y: [100, 0], // Move the elements on y-axis from 100 to 0.
    }
});
anim.play();

→ See more about the topic

Use an animations timeline.

const tl = new Timeline();
tl
  .add(animate({ el: 'span', p: { y: [0, 100] }}))
  .add(animate({ el: 'span', p: { y: [100, 0] }}), 100)
  .add(animate({ el: 'span', p: { y: [0, 50] }}), '=-50');

// At anytime, run the animations timeline.
tl.play();

→ More about timeline

Credits

For this project, I read a lot of articles and source codes. Here are some of them:

Gain Motion Superpowers with requestAnimationFrame

Lodash repository.

@ariiiman/r repository.