var element = document.querySelector("#box-1");
gsap.to("#box-1", { 
	duration: 2,
	x: element.parentNode.offsetWidth - element.offsetWidth,
	rotation: 360,
	yoyo: true,
	repeat: -1,
});

gsap.to() – This is the most common type of tween. A .to() tween will start at the element’s current state and animate “to” the values defined in the tween.

gsap.from() – Like a backwards .to() where it animates “from” the values defined in the tween and ends at the element’s current state.

gsap.fromTo()  – You define both the starting and ending values.

gsap.set() – Immediately sets properties (no animation). It’s essentially a zero-duration .to() tween which can be reverted.

Next up we have to tell GSAP what we want to animate. Under the hood GSAP uses document.querySelectorAll(), so for HTML or SVG targets we can use selector text like ".class" and "#id". Or you can pass in a variable or even an Array.

// use a class or ID
gsap.to(".box", { x: 200 });

// a complex CSS selector
gsap.to("section > .box", { x: 200 });

// a variable
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

// or even an Array of elements
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
                                      
gsap.to([square, circle], { x: 200 })

The vars object contains all the information about the animation. This can be arbitrary properties you want to animate, or special properties that influence the behavior of the animation – like duration, onComplete or repeat.

gsap.to(target, {
  // this is the vars object
  // it contains properties to animate
  x: 200,
  rotation: 360,
  // and special properties
  duration: 2
})

x: 200, // use default of px
x: "+=200" // relative values
x: '40vw', // or pass in a string with a different unit for GSAP to parse
x: () => window.innerWidth / 2, // you can even use functional values to do a calculation!
  
rotation: 360 // use default of degrees
rotation: "1.25rad" // use radians

Transforms, colors, padding, border radius, GSAP can animate it all! Just remember to camelCase the properties – e.g. background-color becomes backgroundColor.

Just like HTML elements, SVG elements can be animated with transform shorthands. Additionally you can animate SVG attributes like width, height, fill, stroke, cx, opacity and even the SVG viewBox itself using an attr object.

GSAP doesn’t need DOM elements in order to animate properties. You can target literally any property of any object, even arbitrary ones you create like this:

let obj = { myNum: 10, myColor: "red" };
gsap.to(obj, {
  myNum: 200,
  myColor: "blue",
  onUpdate: () => console.log(obj.myNum, obj.myColor)
});

In the demo below we have a box drawn with HTML canvas. We’re animating x and y values stored in a position object and then we update the canvas on each tick of the animation. GSAP is often used this way to animate in Three.js, HTML canvas and Pixi.js:

repeat does exactly what you might think – it allows you to play an animation more than once. repeat is often paired with yoyo in order to reverse the direction each cycle. Change the code to yoyo:false in the demo below to see the difference.

gsap.to(".box", { 
  rotation: 360,
  x: '100vw',
  xPercent: -100,
  // special properties
  duration: 2, // how long the animation lasts
  repeat: -1, // the number of repeats 
  yoyo: true, // this will alternate back and forth on each repeat. Like a yoyo
});

You can delay the start of an animation by a certain number of seconds. You can also use repeatDelay to add a delay to the start of any repeat iterations.

Easing is possibly the most important part of motion design. A well-chosen ease will add personality and breathe life into your animation.

Take a look at the difference between no ease and a bounce ease in the demo below! The green box with no ease spins around at a consistent speed, whereas the purple box with the ‘bounce’ ease revs up, races along and then bounces to a stop.

gsap.to(".green", { rotation: 360, duration: 2, ease: "none" });

gsap.to(".purple", { rotation: 360, duration: 2, ease: "bounce.out" });

This is one of our favourite tricks! If a tween has multiple targets, you can easily add some delightful stagger between the start of each animation:

Just like we’ve just seen with staggers, It’s common to animate more than one thing. But what if we need more control over the order and timing of those animations. Delays give us rudimentary control: