Fast Tiny Tweening & Easing JavaScript Library – ATween

Preview:

Description:

If you’re building a web-based animated application and need a fast, simple, and lightweight JavaScript library for tweening and easing — you’ve come to the right place!

ATween is a lightweight, fast, and cross-platform JavaScript tweeting and easing library written purely in vanilla JavaScript. You just toss it into your page and start playing with it. That’s how easy it is!

How to use it:

1. Download and import the ATween library.

<script src="ATween.min.js"></script>

2. Create a simple tween. This tween will tween the target’s x-position CSS property from 0 to 500 for 1000ms (1 second).

• target: The targer object.
• durationMs: Set duration, not including any repeats or delays.
• delayMs: Set initial delay which is the length of time in ms before the tween should begin.

// ATween.newTween(target, durationMs, delayMs})
var target = { x: 0 };
ATween.newTween(target, 1000).to({ x: 500 })

3. Start the tween.

var target = { x: 0 };
ATween.newTween(target, 1000).to({ x: 500 })
.start();

4. Repeat the tween.

• times the repeat times(-1 is infinity)
• yoyo where true causes the tween to go back and forth, alternating backward and forward on each repeat.
• delayMs delay trigger time

// ATween.repeat(times, yoyo, delayMs)
var target = { x: 0 };
ATween.newTween(target, 1000).to({ x: 500 })
.repeat(2, false).
.start();

5. Event handlers.

ATween.newTween(target, 1000).to({ x: 500 })
.onUpdate(function (percent: number, times: number) {
  // do something
})
.onStart(function () {
  // do something
})
.onCancel(function () {
  // do something
})
.onComplete(function (...argArray: any[]) => void, params?: any[]) {
  // do something
})
.onRepeat(function (steps: number) => boolean) {
  // do something
})

6. API methods.

ATween.attach(obj: string | HTMLElement, convert?: (curValue: number, startValue: number, endValue: number, percent: number, property: string) => any)
ATween.callRepeat()
ATween.cancel()
ATween.data(v: any)
ATween.easing(func: (v: number) => number)
ATween.getAttachment()
ATween.getData()
ATween.getPause()
ATween.getRepeatTimes()
ATween.getTarget()
ATween.isRetained()
ATween.onCancel(callback: () => void)
ATween.onComplete(callback: (...argArray: any[]) => void, params?: any[])
ATween.onRepeat(callback: (steps: number) => boolean)
ATween.onStart(callback: () => void)
ATween.onUpdate(callback: (percent: number, times: number) => void)
ATween.release()
ATween.repeat(times: number, yoyo?: boolean, delayMs?: number)
ATween.retain()
ATween.setPause()
ATween.start()
ATween.to(endValues: any)
ATween.toAlpha(v: number)
ATween.toX(v: number)
ATween.toXY(a: number, b: number)
ATween.toY(v: number)
ATween.update(ms: number)
ATween.isTweening()
ATween.killAll(withComplete?: boolean)
ATween.killTweens(targetOrAttachment: any, withComplete?: boolean)
ATween.newOnce(intervalMs: number, onCompleteCallback: any, onCompleteParams?: any[])
ATween.newTimer(intervalMs: number, times: number, onRepeatCallback: (steps: number) => boolean, onCompleteCallback?: any, onCompleteParams?: any[])
ATween.newTween(target: any, durationMs: number, delayMs?: number)
ATween.updateAll(ms: number)

7. Apply an easing function to the animation. All easing names:

• BackIn
• BackInOut
• BackOut
• BounceIn
• BounceInOut
• BounceOut
• CircularIn
• CircularInOut
• CircularOut
• CubicIn
• CubicInOut
• CubicOut
• ElasticIn
• ElasticInOut
• ElasticOut
• ExponentialIn
• ExponentialInOut
• ExponentialOut
• Linear
• QuadraticIn
• QuadraticInOut
• QuadraticOut
• QuarticIn
• QuarticInOut
• QuarticOut
• QuinticIn
• QuinticInOut
• QuinticOut
• SinusoidalIn
• SinusoidalInOut
• SinusoidalOut

var func = ATweenEasing[easingName];
ATween.newTween({ v: 0 }, 2000).to({ v: 100 }).easing(func).