Basics Samples

The following example are moving html elements but you can tween almost any kind of object and data.

Linear tween

See Code

&lt;img id=&#34;sample1&#34; class=&#34;imgTest&#34; src=&#34;/Fatina/Yuko_Blink_2.png&#34;/&gt;
&lt;script&gt;
    function sample1() {
        var elem = document.getElementById(&#34;sample1&#34;);

        var obj = { x: 0, y: 0 };
        Fatina.tween(obj)
            .from({x: 0})
            .to({x: 500}, 2500)
            .onStart(() =&gt; console.log(&#34;tween1 start&#34;))
            .onUpdate((dt, progress) =&gt; {
                elem.style.left = obj.x &#43; &#34;px&#34;;
            })
            .onComplete(() =&gt; console.log(&#34;tween1 complete&#34;))
            .start();
    }
&lt;/script&gt;

Easing (based on easings.net)

See Code

&lt;img id=&#34;sample2&#34; class=&#34;imgTest&#34; src=&#34;/Fatina/Yuko_Blink_2.png&#34;/&gt;
&lt;script&gt;
    function sample2() {
        var elem2 = document.getElementById(&#34;sample2&#34;);

        var obj2 = { x: 0, y: 0 };
        Fatina.tween(obj2)
            .to({x: 500}, 2500)
            .setEasing(&#39;inOutQuad&#39;)
            .onStart(() =&gt; console.log(&#34;tween2 start&#34;))
            .onUpdate((dt, progress) =&gt; {
                elem2.style.left = obj2.x &#43; &#34;px&#34;;
            })
            .onComplete(() =&gt; console.log(&#34;tween2 complete&#34;))
            .start();
    }
&lt;/script&gt;

Sequence (Sequential & Parallel)

See Code

&lt;img id=&#34;sample3&#34; class=&#34;imgTest&#34; src=&#34;/Fatina/Yuko_Blink_2.png&#34;/&gt;
&lt;script&gt;
    function sample3() {
        var elem3 = document.getElementById(&#34;sample3&#34;);

        var obj3 = { x: 0, y: 0, rotate:0 };
        Fatina.sequence()
            .append(Fatina.tween(obj3).to({x: 500}, 1250).setEasing(&#39;inOutSine&#39;))
            .appendInterval(0.2)
            .append(Fatina.tween(obj3).to({x: 0}, 1250).setEasing(&#39;inOutSine&#39;))
            .join(Fatina.tween(obj3).to({rotate: 360}, 1250).setEasing(&#39;inOutCubic&#39;))
            .onUpdate(() =&gt; {
                elem3.style.left = obj3.x &#43; &#34;px&#34;;
                elem3.style.transform = &#34;rotate(&#34; &#43; obj3.rotate &#43; &#34;deg)&#34;
            })
            .onStart(() =&gt; console.log(&#34;tween3 start&#34;))
            .onComplete(() =&gt; console.log(&#34;tween3 complete&#34;))
            .start();
    }
&lt;/script&gt;

Pause / Resume

See Code

&lt;img id=&#34;sample4&#34; class=&#34;imgTest&#34; src=&#34;/Fatina/Yuko_Blink_2.png&#34;/&gt;
&lt;script&gt;
    function sample4() {
        var elem4 = document.getElementById(&#34;sample4&#34;);

        var obj4 = { x: 0, y: 0, rotate:0 };
        var sequence = Fatina.sequence()
            .append(Fatina.tween(obj4).to({x: 500}, 1250).setEasing(&#39;inOutQuad&#39;))
            .append(Fatina.tween(obj4).to({x: 0}, 1250).setEasing(&#39;inOutQuad&#39;))
            .join(Fatina.tween(obj4).to({rotate: 360}, 1250).setEasing(&#39;inOutQuad&#39;))
            .onUpdate(() =&gt; {
                elem4.style.left = obj4.x &#43; &#34;px&#34;;
                elem4.style.transform = &#34;rotate(&#34; &#43; obj4.rotate &#43; &#34;deg)&#34;
            })
            .onStart(() =&gt; console.log(&#34;tween4 start&#34;))
            .onComplete(() =&gt; console.log(&#34;tween4 complete&#34;));
        sequence.start();

        setTimeout(() =&gt; sequence.pause(), 1250);
        setTimeout(() =&gt; sequence.resume(), 2000);
    }
&lt;/script&gt;

Timescale (on both sequence & tween)

See Code

&lt;img id=&#34;sample5&#34; class=&#34;imgTest&#34; src=&#34;/Fatina/Yuko_Blink_2.png&#34;/&gt;
&lt;script&gt;
    function sample5() {
        var elem5 = document.getElementById(&#34;sample5&#34;);

        var obj5 = { x: 0, y: 0, rotate:0 };
        var sequence = Fatina.sequence()
            .append(Fatina.tween(obj5).to({x: 500}, 1250).setEasing(&#39;inOutQuad&#39;))
            .append(Fatina.tween(obj5).to({x: 0}, 1250).setEasing(&#39;inOutQuad&#39;))
            .join(Fatina.tween(obj5).to({rotate: 360}, 1250).setEasing(&#39;inOutQuad&#39;).setTimescale(2))
            .onUpdate(() =&gt; {
                elem5.style.left = obj5.x &#43; &#34;px&#34;;
                elem5.style.transform = &#34;rotate(&#34; &#43; obj5.rotate &#43; &#34;deg)&#34;
            })
            .setTimescale(0.75)
            .onStart(() =&gt; console.log(&#34;tween5 start&#34;))
            .onComplete(() =&gt; console.log(&#34;tween5 complete&#34;));
        sequence.start();
    }
&lt;/script&gt;

Loop (on both sequence & tween)

See Code

&lt;img id=&#34;sample6&#34; class=&#34;imgTest&#34; src=&#34;/Fatina/Yuko_Blink_2.png&#34;/&gt;
&lt;script&gt;
    function sample6() {
        var elem6 = document.getElementById(&#34;sample6&#34;);
        var obj6 = { x: 0, y: 0, rotate:0 };

        // Create moving tween (loop twice)
        Fatina.tween(obj6)
            .from({ x: 0 })
            .to({x: 500}, 1250)
            .setLoop(2)
            .setEasing(&#39;inOutQuad&#39;)
            .onStart(() =&gt; console.log(&#34;tween6 start&#34;))
            .onUpdate((dt, progress) =&gt; {
                elem6.style.left = obj6.x &#43; &#34;px&#34;;
            })
            .onComplete(() =&gt; console.log(&#34;tween6 move complete&#34;))
            .start();

        // Create a sequence of infinite rotation
        Fatina.sequence()
            .join(
                Fatina.tween(obj6)
                    .from({rotate:0})
                    .to({rotate: 360}, 550)
            )
            .onUpdate(() =&gt; {
                elem6.style.transform = &#34;rotate(&#34; &#43; obj6.rotate &#43; &#34;deg)&#34;
            })
            .setLoop(-1)
            .onStart(() =&gt; console.log(&#34;tween6 rotation start&#34;))
            .onComplete(() =&gt; console.log(&#34;tween6 rotation complete&#34;))
            .start();
    }
&lt;/script&gt;

Steps

See Code

&lt;img id=&#34;sample7&#34; class=&#34;imgTest&#34; src=&#34;/Fatina/Yuko_Blink_2.png&#34;/&gt;
&lt;script&gt;
    function sample7() {
        var elem7 = document.getElementById(&#34;sample7&#34;);

        var obj7 = { x: 0, y: 0 };
        Fatina.tween(obj7)
            .to({x: 500}, 2500)
            .setEasing(&#39;inOutSine&#39;)
            .setSteps(15)
            .onStart(() =&gt; console.log(&#34;tween7 start&#34;))
            .onUpdate((dt, progress) =&gt; {
                elem7.style.left = obj7.x &#43; &#34;px&#34;;
            })
            .onComplete(() =&gt; console.log(&#34;tween7 complete&#34;))
            .start();
    }
&lt;/script&gt;

Yoyo (aka pingpong, reverse the tween 5 times)

See Code

&lt;img id=&#34;sample8&#34; class=&#34;imgTest&#34; src=&#34;/Fatina/Yuko_Blink_2.png&#34;/&gt;
&lt;script&gt;
    function sample8() {
        var elem8 = document.getElementById(&#34;sample8&#34;);

        var obj8 = { x: 0, y: 0 };
        Fatina.tween(obj8)
            .to({x: 500}, 2000)
            .setEasing(&#39;inOutSine&#39;)
            .yoyo(5)
            .onStart(() =&gt; console.log(&#34;tween8 start&#34;))
            .onUpdate((dt, progress) =&gt; {
                elem8.style.left = obj8.x &#43; &#34;px&#34;;
            })
            .onComplete(() =&gt; console.log(&#34;tween8 complete&#34;))
            .start();
    }
&lt;/script&gt;