Author: Richard Haines

Posted: 26 May 2020

take me there

The basics

I'm trying to up my css and animation game, this is a record of my notes taken while looking into GSAP. I'll constantly be adding to it as I go. The main purpose of this record is a reference for me to use while updating my site using GSAP (gsap)


The gsap object has three helpful methods for creating tweens and optionally adding them to timelines. A timeline is a container for multiple tweens. Each tweens is called a child of the timeline.

  • gsap.to()
  • gsap.from()
  • gsap.fromTo()

For best performance animate CSS transforms and opacities.

  • x and y
  • rotation, rotationX, rotationY
  • scaleX, scaleY, scale
  • skewX, skewY

Though gsap can animate any numeric property. So not display for example.

  • width, height
  • top, left (position must be set to relative, fixed or absolute)
  • borderRadius
  • colors
  • viewport values

gsap.to()

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});

gsap.from() and gsap.fromTo()

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})

repeat and delay

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});

easing

The default setting for ease is easeOut. See GSAP Easing for examples of them all. On that page there is a graph whihc shows how the animations run. The steeper the curve, the faster the animation, or movement. The flatter the curve, the slower the animation or movement.

Ease types:

  • in
  • inOut
  • out

You don't have to specify out as it's implied seeing as it's the default

These can be combined with:

  • power0
  • power1
  • power2
  • power3
  • power4
  • back
  • elastic
  • bounce
  • rough
  • slowMo
  • stepped
  • circ
  • expo
  • sine
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)"})

stagger

Used to stagger a group of elements animations.

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}});
Edit on GitHub.Previous: Setup Expo with FaunaDB via VercelNext: Jamstack and the power of serverless with FaunaDB