Copy
1// The fist param is the target to animate. This could be a className, which would specifically target any element with that className applied.
2gsap.to(".target");
3
4// Or an actual HTML tag which would select all of them on the page. I guess a ref could be used in React
5gsap.to("img");
6
7// This will move the target element 500 pixels along the x axis for a duration of 3 seconds (the default duration is 500ms, if not set)
8// The fist param is the target to animate
9// The second is the vars object that contains the properties to animate
10gsap.to(".target", {x: 500, duration: 3});
11
12// A tween can change multiple properties over a period of time
13// The target will move across the x axis for a duration of 3 seconds while scaling up 3 times its size, rotating a full 360 degrees and changing its colour to tomato
14gsap.to(".target", {x: 500, scale: 3, rotation: 360, fill:"tomato", duration: 3});
15
16// A tween can change multiple properties of multiple elements too. If multiple elements have the className .target then all three would move the same as declared above
17// If the stagger property is added, as below, then each of the elements animations would fire off with a 1 second delay between them
18gsap.to(".target", {stagger: 1, x: 500, scale: 3, rotation: 360, fill:"tomato", duration: 3});

Copy
1// The from tween will do the reverse of the to tween, so the target will start at x: 500 and have a scale of 3 but will spin 360 and shrink while returning to the original position on the page taking a duration of 3 seconds
2gsap.from(".target", {x: 500, scale: 3, rotation: 360, duration: 3});
3
4// The fromTo tween lets you set the start and end values
5// The first vars object is the from values and the second is the to values
6// The properties in the var objects from and to don't have to match up
7gsap.fromTo(".target", {x: 100, y: 250}, {x: 200, y: 300, scale: 3, duration: 2})
8
9// If you set the opacity to 0 on the from and don't set it to 1 in the to then it wont appear as it doesn't know that you want to animate it to opacity 1
10gsap.fromTo(".target", {x: 100, y: 250, opacity: 0}, {x: 200, y: 300, scale: 3, duration: 2})

Copy
1// The repeat and delay properties can be added. They are pretty self explanatory.
2// Repeat will run the animation for the given number of times, delay will delay the animation for the given number of seconds
3gsap.to(".target", {x: 500, duration: 3, repeat: 2});
4gsap.to(".target", {x: 500, duration: 3, delay: 2});
5
6// You can add the boolean yoyo with a repeat to make the animation repeat the given number of times in a yoyo motion. 
7// So it wont just snap back like if using just repeat
8gsap.to(".target", {x: 500, duration: 3, repeat: 2, yoyo: true});
9
10// To repeat infinitely use -1 as the repeat value
11gsap.to(".target", {x: 500, duration: 3, repeat: -1, yoyo: true});

Copy
1// If you add ease linear then it removes the easing
2gsap.to(".target", {x: 200, ease: "linear"});
3
4// There 3 types of ease that can be combined via dot notation with different types of animation, causing different effects
5// For example
6gsap.to(".target", {x: 300, duration: 3, ease:"bounce.inOut"})
7
8// Back will overshoot the end point and bounce back slightly. Back takes a function param which specifies how much it will overshoot the end point and bounce back again
9gsap.to(".target", {x: 300, duration: 3, ease:"back(3)"})

Copy
1// If you have a number of elements with the className .target then this will stagger the animations 1 second apart
2gsap.to(".target", {x: 350, stagger: 1});
3
4// For a really subtle stagger you can lower the stagger amount
5gsap.to(".target", {x: 350, stagger: 0.2});
6
7// Stagger can take an object instead of just a numerical value. Inside this object you can pass some params
8// Passing each with a numerical value will work the same as just passing a numerical value to stagger. 
9// So in this example each element will fire after 0.2 second, the same as the above implementation
10gsap.to(".target", {x: 350, stagger: {
11    each: 0.2
12}});
13
14// You can also pass amount as a param, which will make each element in the group share the numerical value.
15// If we had 5 elements in our group, each animation would fire for a total of 1 second, so the gap in between would be shorter 
16// but the whole groups animation would take 1 second
17gsap.to(".target", {x: 350, stagger: {
18    amount: 1
19}});
20
21// From can be used to tell gsap from where to begin the stagger. You can pass the array position
22gsap.to(".target", {x: 350, stagger: {
23    from: 2
24}});
25
26// Or you can pass some string values. (Random was added in v3.1.0)
27gsap.to(".target", {x: 350, stagger: {
28    from: "start" || "center" || "edges" || "end" || "random"
29}});
30
31// This looks cool, if your elements are visually in a grid on the page you can pass grid as a param, indicating how many rows and columns there are. 
32gsap.to(".target", {x: 350, stagger: {
33    grid: [3,4] // 3 rows, 4 columns
34}});
35
36// Or you can pass auto to grid and gsap will calculate the rows and columns using element.getBoundingClientRect()
37gsap.to(".target", {x: 350, stagger: {
38    grid: "auto"
39}});
40
41// If you have a grid you can focus on just one axis (x or y)
42gsap.to(".target", {x: 350, stagger: {
43    grid: "auto",
44    from: "center",
45    axis: "y"
46}});
47
48// A cool example from the gsap website. If you have a grid of boxes then you can make them fall away from the center
49gsap.to(".box", {
50  duration: 1,
51  scale: 0.1,
52  y: 40,
53  ease: "power1.inOut",
54
55  stagger: {
56    grid: [7,15],
57    from: "center",
58    amount: 1.5
59  }
60});
61
62// And of course you can add an ease (if you don't the default is out remember) that distributes the start times of the animations
63gsap.to(".target", {x: 350, stagger: {
64    grid: "auto",
65    from: "center",
66    axis: "y",
67    ease: "power2.in"
68}});