var square = document.getElementById("my_div").style;

// The code inside the block only run once.
// Here `square` in the original one wrapped by a Proxy
tatween(1000, Easing.Bounce.Out, (square /* Proxy wrapped element */) => {
    /*
        This block define the "end values".
        tatween will tween them from their initial values to the end values described here
    */

    /* Set the end value for top and width. */
    square.top = "0px";
    square.width = "150px";

    /*
        Add 200 to the initial left value.
        Here, it's the same than doing `square.left = "250px"`
    */
    square.left += 200;

}, square /* original element */);

tatween(3000, Easing.Elastic.Out, (square_one, square_two) => {

   // Swap the left of the two element using destructuring array.
   [square_one.left, square_two.left] = [square_two.left, square_one.left]

}, square_one, square_two); // Give any number of elements

import { tatween, Easing } from 'tatween'

tatween(1000 /* duration in ms */, Easing.Bounce.Out /* Easing function */, (obj_A, obj_B, obj_C) => {
    // Animate anything from obj_A/obj_B/obj_C :

    // obj_A.width = "42px";
    // obj_B.left = 30;
    // obj_C.top = obj_A.top
}, obj_A, obj_B, obj_C);