Properties

We can basicly animate any properties. All transformation will be done around element transform origin which is element center by default. To set origin we use transformOrigin property. We can use percent values '10% 20%', pixels '10px 20px' or keywords 'left bottom. The first value is always horizontal position, then vertical. Transfor origin can be outside of element


        gsap.to('.cube', { duration: 3, rotation: 360, transformOrigin: '0%
        100%' });

Here we rotate cube by 360 degree, but origin is bottom left corner

xPercent, yPercent

gsap.to('.cube', { duration: 2, xPercent: 500 });

Moves cube by 500% of his width along x-axis

rotation, rotationX, rotationY

gsap.to('.cube', { duration: 3, rotation: 360 });

Rotates the cube by 360 degree

gsap.to('.cube', { duration: 3, rotationX: 360 });

Rotates the cube by 360 deg on x axis

gsap.to('.cube', { duration: 3, rotationY: 360 });

Rotates the cube by 360deg on y axis

scale, scaleX, scaleY

gsap.to('.cube', { duration: 2, scale: 0.5 });

Scales the cube by half

gsap.to('.cube', { duration: 2, scaleX: 0.5 });

Scales the cube by half on x axis

gsap.to('.cube', { duration: 2, scaleY: 0.5 });

Scales the cube by half on y axis

skewX, skewY

gsap.to('.cube, { duration: 2, skewX: -45 });

Skews the cube by 45 deg on x axis

gsap.to( '.cube', { duration: 2, skewY: -45 } );

Skews the cube by 45 deg on y axis