https://github.com/sfi0zy/weeee

Tiny Javascript tweening engine.
https://github.com/sfi0zy/weeee

animation tween

Last synced: 3 months ago
JSON representation

Tiny Javascript tweening engine.

• Host: GitHub
• URL: https://github.com/sfi0zy/weeee
• Owner: sfi0zy
• License: mit
• Archived: true
• Created: 2021-06-11T10:02:49.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-06-16T15:40:22.000Z (over 3 years ago)
• Last Synced: 2024-04-10T00:30:08.183Z (7 months ago)
• Topics: animation, tween
• Language: JavaScript
• Homepage: https://sfi0zy.github.io/weeee/
• Size: 50.8 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web-animation - Weeee.js - Tiny Javascript tweening engine. (Common)

README

        
# Weeee.js

![](https://img.shields.io/badge/version-1.0.3-brightgreen) ![](https://img.shields.io/badge/dependencies-0-brightgreen) ![](https://img.shields.io/badge/license-MIT-brightgreen)

Tiny Javascript tweening engine.

[Homepage](https://sfi0zy.github.io/weeee)

![Weeee.js](main.png)

## Usage

Step 1:

```sh

npm install --save weeee.js

```

Step 2:

```javascript

import Weeee from 'weeee.js';

const example = new Weeee({

    // 

    // Infinity

    duration: 1000,

    //  

    delay: 0,

    //  Weeee.easeLinear

    //  Weeee.easeInCubic

    //  Weeee.easeOutCubic

    //  Weeee.easeInExpo

    //  Weeee.easeOutExpo

    //  Weeee.easeInElastic

    //  Weeee.easeOutElastic

    //  

    easing: Weeee.easeLinear,

    //  Weeee.normal

    //  Weeee.reverse

    //  Weeee.alternate

    direction: Weeee.normal,

    //  true

    //  false

    autoplay: true,

    //  false

    //  

    //  Infinity

    loop: false,

    // 

    loopDelay: 0,

    //  

    fps: 60,

    //  

    //

    // Weeee doesn't force us to manipulate with specific CSS, SVG,

    // Canvas or WebGL objects. Just do whatever you want here.

    //

    // Progress will be from 0 to 1.

    //

    // Additional details include:

    //  - startTime (when animation has been started, in ms)

    //  - currentTime (current time, may bee needed in infinite animations, in ms)

    //  - delta (time from the start, "currentTime - startTime", in ms)

    //  - isFinished (becomes true in the last frame of the finite animation)

    func: (progress, details) => {

        myElement.style.transform = `scale(${progress})`;

    },

    // Optional callback. It will be executed after the last frame of the animation.

    callback: () => {

        console.log('weeee!');

    }

});

// Also it's possible to start/stop/restart it manually. Callback will NOT be executed.

//

// example.start();

// example.stop();

// example.restart();

```

## CDN

It's possible to import Weeee right from the unpkg:

```javascript

import Weeee from 'https://unpkg.com/weeee.js/weeee.js';

```

## More examples

Examples on CodePen:

1. [Page loading](https://codepen.io/sfi0zy/pen/mdWQwzL)

2. [Spinner](https://codepen.io/sfi0zy/pen/bGqQMvN)

## License

MIT License

Copyright (c) 2021 Ivan Bogachev [email protected]