Skip to content
/ g Public

๐ŸŒบ๐Ÿƒ A garden of small JavaScript utilities.

License

Notifications You must be signed in to change notification settings

mystroken/g

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

43 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

G

npm bundle size npm npm GitHub last commit contributions welcome

๐ŸŒบ๐Ÿƒ 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.