A garden of small JavaScript utilities.
npm install @mystroken/g!npm bundle size
!npm
!npm
!GitHub last commit
> :hibiscus::leaves: G is a garden of small JavaScript utilities.
``bash`
npm install @mystroken/g
Look at the sources files for more information.
###### Import
`javascript
// 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.
`javascript`
const rAF = new Raf(elapsed => console.log(elapsed));
rAF.run();
###### Call a func after a certain delay.
`javascriptCall me ${duration}ms later
const duration = 2000;
const callback = () => console.log();`
const delay = new G.Delay(callback, duration);
delay.run();
###### Animate things
`javascript`
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();
###### Use an animations timeline.
`javascript
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();
``
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.