p5.tween
![npm](https://img.shields.io/npm/dt/p5.tween)
With p5.tween you can create easily animations as tween in a few keyframes
![logo](https://raw.githubusercontent.com/Milchreis/p5.tween/master/p5.tween.gif)
🚀 Usage
- Add p5.tween.min.js to your sketch after p5.js
<script src="p5.min.js"></script>
<script src="https://unpkg.com/p5.tween/dist/p5.tween.min.js"></script>
- Add a tween to your sketch
p5.tween.manager
.addTween(object, 'tween1')
.addMotion('width', 12, 100, 'easeInOutQuint')
.addMotions([
{ key: 'x', target: mouseX },
{ key: 'y', target: mouseY }
], 500, 'easeInOutQuint')
.start()
👩🔬 Examples
All examples are saved in the p5.tween collection: https://editor.p5js.org/Milchreis/collections/oHxcCR17k
Create a tween with step by step motions
p5.tween.manager.addTween(myShape)
.addMotion('x', 10, 1000)
.addMotion('y', 10, 1000)
.addMotion('x', width - 10, 1000)
.addMotion('y', height - 10, 1000)
.addMotion('x', 200, 500)
.addMotion('y', 200, 500)
.startLoop()
Create a tween with simultanious motions
p5.tween.manager.addTween(myShape)
.addMotions([
{ key: 'x', target: 10 },
{ key: 'y', target: 10 },
], 1000)
.addMotions([
{ key: 'x', target: width - 10 },
{ key: 'y', target: height - 10 },
], 1000)
.addMotions([
{ key: 'x', target: 200 },
{ key: 'y', target: 200 },
], 500)
.startLoop()
Using an event on loop
p5.tween.manager.addTween(myShape, 'tween1')
.onLoop((tween) => myShape.c = random(0, 255))
.addMotions([
{ key: 'y', target: height },
{ key: 'w', target: 30 },
{ key: 'h', target: 80 },
], 600, 'easeInQuad')
.startLoop()
📖 API
Most used methods
let tween = p5.tween.manager.addTween(yourObject, 'name for your tween')
let tween = p5.tween.manager.getTween('name for your tween')
tween.addMotion('key', targetValue, timeInMillis)
tween.addMotions([{ key, target }], timeInMillis)
tween.resetMotions()
tween.startLoop()
tween.startTween()
tween.onLoop((thisTween) => console.log(thisTween))
tween.onEnd((thisTween) => console.log(thisTween))
Easing functions
You can use different easing functions for your tween to change the acceleration:
tween.addMotion('width', 12, 100, 'easeOutQuad')
- linear: no easing, no acceleration
- easeInQuad: accelerating from zero velocity
- easeOutQuad: decelerating to zero velocity
- easeInOutQuad: acceleration until halfway, then deceleration
- easeInCubic: accelerating from zero velocity
- easeOutCubic: decelerating to zero velocity
- easeInOutCubic: acceleration until halfway, then deceleration
- easeInQuart: accelerating from zero velocity
- easeOutQuart: decelerating to zero velocity
- easeInOutQuart: acceleration until halfway, then deceleration
- easeInQuint: accelerating from zero velocity
- easeOutQuint: decelerating to zero velocity
- easeInOutQuint: acceleration until halfway, then deceleration
- easeInElastic: elastic bounce effect at the beginning
- easeOutElastic: elastic bounce effect at the end
- easeInOutElastic: elastic bounce effect at the beginning and end
- easeInSin: accelerating sinus
- easeOutSin: decelerating sinus
- easeInOutSin: acceleration until halfway, then deceleration
🍻 Contributing
If there's a missing feature you'd like to see on p5.tween, feel free to write it and submit a pull request. Something broke? Please try to fix it! Also feel free to submit issues, bug reports and requests for future features.
📜 Licensing
The p5.tween library is licensed under the MIT License. You can find a copy of the MIT License on this repository.