Using TweenLite to Multiple Elements and properties

 Using TweenLite to Multiple Elements

const square1 = document.querySelector(".box1");

const square2 = document.querySelector(".box3");

const boxArray = [square1, square2]

TweenLite.to(boxArray, 1,{

    backgroundColor : "red",

    y : 200,

    autoAlpha : 0

})

Yes you can create array having selected element to which you want to apply same animation;

If you want to apply same animation for all element at once then you can use queryselectorAll;

const allItems = document.querySelectorAll(".boxes");

TweenLite.to(allItems, 1,{

    backgroundColor : "red",

    y : 200,

    autoAlpha : 0

})

Properties

onStart = when you click certain things then that tweenlite animation starts, you can use with html elements like buttons, links etc

const allItems = document.querySelectorAll(".boxes");

TweenLite.to(allItems, 1,{

    backgroundColor : "red",

    y : 200,

    autoAlpha : 0,

    onStart : button

})

function button(){

    window.alert("start !")

}

this will alert as Start ! and when clicked ok then animation starts

Similary you can try with oncomplete

onComplete = notify somethings after end of animations  

const allItems = document.querySelectorAll(".boxes");

TweenLite.to(allItems, 1,{

    backgroundColor : "red",

    y : 200,

    autoAlpha : 0,

    onComplete : button

})

function button(){

    window.alert("Completed !")

}

you can also use rnadom values for postions;

const box1 = document.querySelector(".box1");

const box3 = document.querySelector(".box3");

const array = [box1, box3];

TweenLite.to(array, 1,{

    backgroundColor : "red",

    y : function(){

        return Math.random()*300;

    },

    autoAlpha : 0,

})

This code wont works but concept is real 

i.e if there are more element they will have different value of y randomly