Tweens notes
March 3, 2022
12:01 PM
Ref: [link]

Basic Tween
The basic syntax for a to() tween is as follows:
gsap.to(".fred", {x:400}); // animates the element with a class of “fred” to an x position of 400.
If you do not specify a duration, gsap will use the default which is 0.5 seconds (500ms).
You can change the default duration using:
gsap.defaults({duration:1});
Behind the scenes gsap changes the target’s inline style during the animation.
For best performance animate CSS Transform values and opacity:
x
y
rotation
rotationX
rotationY
skewX and skewY
scaleX, scaleY, or just scale
GSAP can animate any numeric property you throw at it.
width and height
backgroundColor *hyphenated values need to be camelCase
color
padding
left and top (must set position to relative, absolute, or fixed)
vh and vw
Changing values that are not CSS Transforms or opacity can cause the browser to re-do its layout of the page which in extreme situations can hinder performance. For a few tweens, it’s not the end of the world as some purists make it out to be. 
Basic Tween Exercise
1: Open:  [link]
2: Type the following code:
gsap.to(".fred", {x:700, y:400, scale:3, rotation:360, duration:3});
3: Press the run button to see your animation!
Links and More
gsap.to() docs: [link])
gsap defaults docs: [link])
From <[link]> 