National Palace Museum

    tween24
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0 • Public • Published

    Tween24.js

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

    Example of Tween24

    Release notes & Demo

    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.";
    }

    Property method

    • x()
    • y()
    • xy()
    • scaleX()
    • scaleY()
    • scaleXY()
    • scale()
    • skewX()
    • skewY()
    • skewXY()
    • skew()
    • rotation()
    • width()
    • height()
    • top()
    • right()
    • bottom()
    • left()
    • color()
    • backgroundColor()
    • borderWidth()
    • borderColor()
    • borderRadius()
    • opacity()
    • alpha()
    • delay()
    • fps()
    • debug()
    • id()

    Add v0.9.3

    • willChange()
    • angle()
    • letterSpacing()

    Add v0.9.11

    • jump()
    • trigger()
    • groupId()

    Add v1.0.0

    • bezier()
    • x$(), y$(), rotation$() etc...
    • x$$(), y$$(), rotation$$() etc...
    • transformOrigin()
    • backgroundPosition()
    • pointerEvents()

    Add v1.1.0 (Time scale)

    • timeScale()
    • delayScale()

    Add v1.2.0 (Clip)

    • clipTop()
    • clipRight()
    • clipBottom()
    • clipLeft()
    • clipVertical()
    • clipHorizontal()
    • clip()
    • clipRound1()
    • clipRound2()
    • clipRound3()
    • clipRound4()
    • clipRound()
    • clipCircle()
    • clipCircleX()
    • clipCircleY()
    • clipCircleXY()
    • clipEllipse()
    • clipEllipseWidth()
    • clipEllipseHeight()
    • clipEllipseX()
    • clipEllipseY()
    • clipEllipseXY()

    Add v1.3.0 (Filters)

    • blur()
    • brightness()
    • contrast()
    • grayscale()
    • hue()
    • invert()
    • opacityFilter()
    • saturate()
    • sepia()
    • shadow()
    • shadowX()
    • shadowY()
    • shadowBlur()
    • shadowColor()

    Tween & Action method

    • Tween24.tween()
    • Tween24.prop()
    • Tween24.serial()
    • Tween24.parallel()
    • Tween24.wait()
    • Tween24.func()

    Add v0.9.3

    • Tween24.loop()
    • Tween24.lag()
    • Tween24.lagTotal()
    • Tween24.lagSort()
    • Tween24.lagTotalEase()
    • Tween24.lagTotalSortEase()
    • Tween24.tweenVelocity()
    • Tween24.propText()
    • Tween24.tweenText()
    • Tween24.tweenTextVelocity()

    Add v0.9.11

    • Tween24.ifCase()
    • Tween24.waitEvent()
    • Tween24.waitEventAndFunc()

    Control method

    • tween.play();
    • tween.pause();
    • tween.stop();

    Add v0.9.11

    • tween.skip();

    • tween.manualPlay();

    • tween.manualUpdate();

    • Tween24.playById();

    • Tween24.pauseById();

    • Tween24.skipById();

    • Tween24.stopById();

    • Tween24.manualPlayById();

    • Tween24.playByGroupId();

    • Tween24.pauseByGroupId();

    • Tween24.skipByGroupId();

    • Tween24.stopByGroupId();

    • Tween24.manualPlayByGroupId();

    State properties

    Add v1.1.0

    • tween.isPlaying
    • tween.isPausing

    Callback

    • tween.onPlay()
    • tween.onInit()
    • tween.onUpdate()
    • tween.onPause()
    • tween.onResume()
    • tween.onStop()
    • tween.onComplete()

    Easing

    • Ease24._Linear
    • Ease24._1_Sine...
    • Ease24._2_Quad...
    • Ease24._3_Cubic...
    • Ease24._4_Quart...
    • Ease24._5_Quint...
    • Ease24._6_Expo...
    • Ease24._7_Circ...
    • Ease24._Bounce...
    • Ease24._Back...
    • Ease24._Back...With
    • Ease24._Elastic...
    • Ease24._Elastic...With
    • Ease24._Blend

    Gobal setting

    • Tween24.setDefaultEasing();
    • Tween24.setFPS();

    Add v1.1.0

    • Tween24.setGlobalTimeScale();

    Add v1.2.0

    • Tween24.skipHello();

    Install

    npm i tween24

    DownloadsWeekly Downloads

    37

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    486 kB

    Total Files

    65

    Last publish

    Collaborators

    • atsushi-kaga