twinjs
v1.0.17
Published
Simple but powerful tweening library
Downloads
17
Readme
Twin.js
Simple but powerful tweening library. WIP
Installation and import
npm install --save twinjs
import { Tween } from 'twinjs'
Quick Start
import { Tween, easing } from 'twinjs'
const objectToTween = {
material: { opacity: 1 },
position: { x: 0, y: 0 },
rotation: { x: 45, y: 0 },
scale: 1,
}
const tween = new Tween(objectToTween)
.to(
{
material: { opacity: 0 }, // Nested values with unlimited depth
position: {
y: -5,
// Value of x will be calculated at each update
// Super useful for responsive animations
// You can use one tween for both mobile and desktop
x: () => window.innerWidth < 1000 ? 10 : 0,
},
scale: '*0.5', // Relative values. +, -, / and * are available
// You can also use all of this in combination!
rotation: () => ({ x: '*2', y: window.innerWidth < 1000 ? 180 : 0 }),
},
1000 // Duration in ms
)
// Default easing is inOutPower1
// All often used easings are included
// You can also write your own custom easings
.easing(easing.inOutExp)
.delay(1000) // Delay in ms
// Run the tween. Updating is handled automatically.
// You can also use .start() and .update()/.progress() to have full control over the tween
.run()
Easings
You can see all the easings in action here: https://easings.net/
All easings(except linear) have in
, out
and inOut
prefixes
Default easing is inOutPower1
import { Tween, easing } from 'twinjs'
new Tween(...).easing(easing.inOutExp)
linear
Power1
. Also called quadPower2
. Also called cubicPower3
. Also called quartPower4
. Also called quintSine
Exp
Circ
Back
Elastic
Bounce
Custom easing
import { Tween } from 'twinjs'
// t is in [0, 1] range
function yourCustomEasing(t) {
// Forward linear easing in first half, but reversed in the second
return t < 0.5 ? (t * 2) : (1 - (t - 0.5) * 2)
}
new Tween(...).easing(yourCustomEasing)
Lerps
Default lerp is linearLerp
linearLerp
expoLerp
. Useful for zooming/scaling things. Greensock has great explanation why you might need it
import { Tween, lerp } from 'twinjs'
new Tween(...).lerp(lerp.expoLerp)
Custom lerp
import { Tween } from 'twinjs'
// t is in [0, 1] range
function yourCustomLerp(startValue, endValue, t) {
return Math.exp(linearLerp(Math.log(startValue), Math.log(endValue), t))
}
new Tween(...).lerp(yourCustomLerp)
API
class Tween
Functions
constructor(target)
to(endProps, duration)
- Alias forfromTo({}, endProps, duration)
from(startProps, duration)
- Alias forfromTo(startProps, {}, duration)
fromTo(startProps, endProps, duration)
easing(easingFunc)
- Sets easing functionlerp(lerpFunc)
- Sets lerp functionmodifier(modifierFunc)
- Sets modifier functiondelay(delay)
- Sets tween delayrepeat(repeat)
- Sets amount of times to repeat the tweenyoyo(yoyo)
- Enables or disables yoyo. If yoyo is enabled, tween will alternate its direction at each repetitionreverse(reverse)
- Enables or disables tween reverseduration(duration)
- Sets tween durationstart(startTime = performance.now())
- Start the tween. You have to manually call.update()
to update the tweenrun(startTime = performance.now())
- Run the tween..update()
is called automaticallyupdate(time = performance.now())
- Updates the tweenprogress(time)
- Updates the tween. Does not take into account startTime, delay or is tween playing/paused or notpause()
resume()
Events
onUpdate(onUpdate)
onStart(onStart)
onRepeat(onRepeat)
onComplete(onComplete)
onPause(onPause)
onResume(onResume)
Browser support
- Last 2 versions
- Edge >= 18
- Safari >= 10.3
Inspiration
License
MIT