Have ideas to improve npm?Join in the discussion! »

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

    0.7.6 • Public • Published

    Tween24.js

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

    Example of Tween24

    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
    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
    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();
    
    // 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(this, update).onComplete(this, 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(...)

    Tween & Action method

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

    Control method

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

    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(...);

    Install

    npm i tween24

    DownloadsWeekly Downloads

    11

    Version

    0.7.6

    License

    MIT

    Unpacked Size

    163 kB

    Total Files

    39

    Last publish

    Collaborators

    • avatar