Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanhefner committed Sep 13, 2017
0 parents commit 473c635
Show file tree
Hide file tree
Showing 13 changed files with 4,165 additions and 0 deletions.
10 changes: 10 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.DS_Store
easing
es
node_modules
umd
/*.js
*.sublime-project
*.sublime-workspace
!rollup.config.js

2 changes: 2 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
tools
rollup.config.js
21 changes: 21 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2017 Ryan Hefner <hi@ryanhefner.com> (https://www.ryanhefner.com)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
114 changes: 114 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
# [WIP] Tweenkle ✨

Lightweight tweening library built for modern Javascript environments that favor
small modular components over heavy monolithic bundled libraries.

In addition to the `Tween` class, this library contains
all of the [Robert Penner easing equations](http://robertpenner.com/easing/) as
direct exports for each variation, allowing you to use them in your site or app,
without all the overhead of having to load the entire library. More information
on the available [eases](#eases) is available below.

## Why?

Might as well get this out of the way early, since I’m sure a lot of people will
say, "Why the f@€k did you bother to write another tweening library, THERE ARE
SO MANY!!!!1!!1!". Well, you’re right, I didn't have to write this, and there are
plenty of options out there, but this is part a personal exercise, while also
being the library that I need 90% of the time and is setup to work nicely in ES6
environments.

## Install

Via [npm](https://npmjs.com/package/tweenkle)

```sh
npm install --save tweenkle
```

Via [Yarn](https://yarn.fyi/tweenkle)

```sh
yarn add tweenkle
```

## How to use

### `Tween`

#### Parameters

* `start` - Initial value you would like to tween from.

* `end` - Target value of the tween. Once reached, tween completes.

* `duration:Number` - How long the tween will run for. (Default: `1000`)

* `ease:Function` - Easing function/equation used to manipulate the value while tweening. (Default: `Linear`)

* `delay:Number` - [Currently not implemented, but exploring how this could be used.] (Default: `0`)

#### Methods

* `start()` - Initiates the start of the tween.

* `stop()` - Stops the tween.

#### Events

* `tick` - Fired while the Tween is tweening.

* `complete` - Fired when the tween completes/reaches the `end` value.

#### Example

```js
import Tween from 'tweenkle';
import { InOut as QuadInOut } from 'tweenkle/easing/Quad';

const tween = new Tween({
start: 0,
end: 100,
duration: 1000,
ease: QuadInOut,
});

tween.on('tick', ({start, end, duration, progress, ease, value}) => {
// Manipulate element or variable based on tween value
});

tween.on('complete', ({start, end, duration, progress, ease, value}) => {
// Tween is done, do whatever you want here, or not. Events are optional.
});

tween.start();
```

### Easing

For the visual people out there, I wrote a quick [easing visualizer](https://codepen.io/ryanhefner/details/YxmKQG/)
so you can preview what the easing equation looks like before you use it.

* Back

* Bounce

* Circ

* Cubic

* Elastic

* Linear

* Quad

* Quart

* Quint

* Sine

## License

[MIT](LICENSE)
Loading

0 comments on commit 473c635

Please sign in to comment.