Tween24 NPM | npm.io

Tween24.js

Tween24.js is animation library that enables fast coding using method chains.

Example of Tween24

Release notes & Demo

v1.0.0
- https://ics.media/entry/220304/
v0.9.11
- https://ics.media/entry/210818/
v0.9.3
- https://ics.media/entry/210622/
v0.7.6
- https://ics.media/entry/210409/

Setup

Script Install

<script src="tween24.js"></script>

NPM Install

$ npm install tween24

Sample

// Single Tween
Tween24.tween(target, 1).x(860).play();

// Serial Tween (Play in order.)
Tween24.serial(
  Tween24.prop(".box").opacity(0),
  Tween24.tween("#box1", 1, Ease24._6_ExpoInOut).x(860).opacity(1),
  Tween24.tween("#box2", 1, Ease24._6_ExpoInOut).x(860).opacity(1),
  Tween24.tween("#box3", 1, Ease24._6_ExpoInOut).x(860).opacity(1)
).play();

// Parallel Tween (Play at the same time.)
Tween24.parallel(
  Tween24.prop(".box").opacity(0),
  Tween24.tween("#box1", 1, Ease24._6_ExpoInOut).x(860).opacity(1),
  Tween24.tween("#box2", 1, Ease24._6_ExpoInOut).x(860).opacity(1),
  Tween24.tween("#box3", 1, Ease24._6_ExpoInOut).x(860).opacity(1)
).play();

// Serial & Parallel Tween
Tween24.serial(
  Tween24.parallel(
    Tween24.tween(".box", 2, Ease24._6_ExpoInOut).x(860),
    Tween24.serial(
      Tween24.tween(".box", 1, Ease24._3_CubicIn).scaleX(1.3).skewX(70),
      Tween24.tween(".box", 1, Ease24._3_CubicOut).scaleX(1).skewX(0)
    )
  ),
  Tween24.tween(".box", 1.5, Ease24._6_ExpoOut).x(0).rotation(180).borderRadius(50),
).play();

// Loop Tween (Play repeatedly.)
Tween24.loop(10,
  Tween24.serial(
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(860).rotation(90),
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(0).rotation(0)
  )
).play();

// Lag Tween (Delay multiple targets.)
Tween24.lag(0.1,
  Tween24.tween(".box", 1, Ease24._6_ExpoInOut).x(930)
).play();

// Total Lag Tween (Set total delay time.)
Tween24.lagTotal(1,
  Tween24.tween(".box", 1, Ease24._6_ExpoInOut).x(930)
).play();

// Sort Lag Tween (Change the order.)
Tween24.lagSort(0.1, Sort24._Shuffle,
    Tween24.tween(".box", 1, Ease24._6_ExpoInOut).x(930)
).play();

// Ease Total Lag Tween (Ease the delay.)
Tween24.lagTotalEase(2, Ease24._6_ExpoOut,
    Tween24.tween(".box", 1, Ease24._2_QuadOut).x(930)
).play();

// Sort & Ease Total Lag Tween
// (Change the order, and ease the delay.)
Tween24.lagTotalSortEase(2, Sort24._Reverse, Ease24._6_ExpoOut,
    Tween24.tween(".box", 1, Ease24._2_QuadOut).x(930)
).play();

// Velocity Tween (Set speed instead of time.)
Tween24.tweenVelocity("#box2", 500).x(860).rotation(180).play();

// Text Tween (Character-by-character animation.)
Tween24.serial(
  Tween24.propText("#text").y(-100).opacity(0).letterSpacing(10),
  Tween24.lagSort(0.06, Sort24._Shuffle,
    Tween24.tweenText("#text", 1, Ease24._6_ExpoOut).y(0).opacity(1)
  )
).play();

// Set will-change (Optimize animation.)
Tween24.serial(
  Tween24.tween(".box", 1, Ease24._6_ExpoInOut).x(930)
).willChange().play();

// If Tween
Tween24.ifCase(() => { return document.getElementById("checkbox").checked; },
    // true
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(860).rotation(360),
    // false
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(860)
).play();

// Wait event
Tween24.serial(
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(430).opacity(1),
    Tween24.waitEvent("#box", Event24.CLICK),
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(860).opacity(0)
).play();

// Next depending on progress
Tween24.serial(
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(810).jump(0.5),
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).y(330).jump(0.5),
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(50).jump(0.5),
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).y(50)
).play();

// Set the trigger to proceed to the next
Tween24.serial(
    Tween24.serial(
        Tween24.tween("#box1", 1, Ease24._6_ExpoInOut).x(860),
        // Trigger tween
        Tween24.tween("#box2", 1, Ease24._6_ExpoInOut).x(860).trigger(),
        Tween24.tween("#box3", 1, Ease24._6_ExpoInOut).x(860)
    ),
    Tween24.serial(
      ...
    )
).play();

// Manual play and update
Tween24.serial(
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(860),
    Tween24.tween("#box", 1, Ease24._6_ExpoInOut).x(0)
).manualPlay();

// Run the update every 0.1s
setInterval(Tween24.manualAllUpdate, 100);

// Control by ID
Tween24.tween("#box", 1).x(860).id("tw01");

Tween24.playById("tw01");

// Control by Group ID
Tween24.tween("#box1", 1).x(860).groupId("group01");
Tween24.tween("#box2", 1).rotation(360).groupId("group01");
Tween24.tween("#box3", 1).opacity(0).groupId("group01");
Tween24.tween("#box4", 1).xy(400, 400).groupId("group01");

Tween24.playByGroupId("group01");

// Bezier curve tween
Tween24.serial(
    Tween24.tween("#box", 1).x(860).bezier(430, -300),
    Tween24.tween("#box", 1.5).x(0).bezier(645, 400).bezier(215, -400)
).play();

// Timer sample
var time = 5;
let timer = Tween24.serial(
  Tween24.prop(this, { time: this.time }),
  Tween24.tween(this, this.time, Ease24._Linear, { time: 0 }).onUpdate(update).onComplete(finish)
);
function update() {
  document.getElementById("timer").textContent = "Time: " + this.time.toFixed(1);
}
function finish() {
  document.getElementById("timer").textContent = "finish.";
}