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()
// The fist param is the target to animate. This could be a className, which would specifically target any element with that className applied.
gsap.to('.target');
// Or an actual HTML tag which would select all of them on the page. I guess a ref could be used in React
gsap.to('img');
// 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)
// The fist param is the target to animate
// The second is the vars object that contains the properties to animate
gsap.to('.target',{ x:500, duration:3});
// A tween can change multiple properties over a period of time
// 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
gsap.to('.target',{
x:500,
scale:3,
rotation:360,
fill:'tomato',
duration:3,
});
// 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
// If the stagger property is added, as below, then each of the elements animations would fire off with a 1 second delay between them
gsap.to('.target',{
stagger:1,
x:500,
scale:3,
rotation:360,
fill:'tomato',
duration:3,
});
gsap.from() and gsap.fromTo()
// 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
// The fromTo tween lets you set the start and end values
// The first vars object is the from values and the second is the to values
// The properties in the var objects from and to don't have to match up
gsap.fromTo(
'.target',
{ x:100, y:250},
{ x:200, y:300, scale:3, duration:2},
);
// 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
gsap.fromTo(
'.target',
{ x:100, y:250, opacity:0},
{ x:200, y:300, scale:3, duration:2},
);
repeat and delay
// The repeat and delay properties can be added. They are pretty self explanatory.
// Repeat will run the animation for the given number of times, delay will delay the animation for the given number of seconds
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
// If you add ease linear then it removes the easing
gsap.to('.target',{ x:200, ease:'linear'});
// There 3 types of ease that can be combined via dot notation with different types of animation, causing different effects
// 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