https://github.com/mystroken/g
🌺🍃 A garden of small JavaScript utilities.
https://github.com/mystroken/g
animation-library helper-functions javascript javascript-library
Last synced: 4 months ago
JSON representation
🌺🍃 A garden of small JavaScript utilities.
- Host: GitHub
- URL: https://github.com/mystroken/g
- Owner: mystroken
- License: mit
- Created: 2019-08-27T05:25:59.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-03-03T09:05:10.000Z (over 5 years ago)
- Last Synced: 2025-10-27T10:51:36.408Z (8 months ago)
- Topics: animation-library, helper-functions, javascript, javascript-library
- Language: JavaScript
- Homepage:
- Size: 176 KB
- Stars: 18
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# G
[](https://github.com/mystroken/g/issues)
> :hibiscus::leaves: G is a garden of small JavaScript utilities.
## Installation
```bash
npm install @mystroken/g
```
## Usage
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.
```javascript
const duration = 2000;
const callback = () => console.log(`Call me ${duration}ms later`);
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();
```
[→ See more about the topic](https://github.com/mystroken/g/blob/master/ANIMATION.md)
###### 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();
```
[→ More about timeline](https://github.com/mystroken/g/blob/master/TIMELINE.md)
## Credits
For this project, I read a lot of articles and source codes. Here are some of them:
[Gain Motion Superpowers with requestAnimationFrame](https://medium.com/@bdc/gain-motion-superpowers-with-requestanimationframe-ecc6d5b0d9a4)
[Lodash](https://github.com/lodash/lodash) repository.
[@ariiiman/r](https://github.com/ariiiman/r) repository.