The basic syntax for a to() tween is as follows:
// animates the element with a class of “box” to an x position of 400.\ngsap.to(".box", { x: 400 })Duration is a special property because it does not get animated. It simply tells us for how long the animation is going to run.
\ngsap.to(‘.box’, {x: 750, duration: 3})Above, the animation will be completed in 3 seconds. Remember that there is no need to mention the letter s here or anything else. GSAP understands that the value entered is in seconds.
If you do not specify a duration, gsap will use the default which is 0.5 seconds (500ms).
\nYou can change the default duration using the defaults method of the gsap object.
gsap.defaults({ duration: 1 })Behind the scenes gsap changes the target’s inline style during the animation.
\nFor best performance animate CSS Transform values and opacity:
\nGSAP can animate any numeric property you throw at it.
\nChanging values that are not CSS Transforms or opacity can cause the browser to re-do its layout of the page which in extreme situations can hinder performance. For a few tweens, it’s not the end of the world as some purists make it out to be.
\nGsap object has three main methods for creating animations - gsap.from(), gsap.to() & gsap.fromTo().
gsap.from() animates from the values you specify to the object’s natural values.
To animate from x and y values of 400, use:
\ngsap.from(".box", { x: 400, y: 400 })gsap.to(‘.box’, {x: 750, duration: 3})gsap.fromTo() animates from the values you specify to the values you specify.
The 2 objects in the code below are the from vars and to vars.
\ngsap.fromTo(".box", { x: 400, y: 400 }, { x: 200, y: 200 })For best results make sure the from vars and to vars have the same properties.
\nSpecial properties define how the animation should run and what it should do. Special properties are not animated.
\nEase controls the acceleration and deceleration of your animation.
\nBy default, gsap puts an ease-out ease on your animation. Ease-out means the animation will slow down towards the end. Because that’s what happens in nature. Things come to a stop because of the friction.
When you apply an ease of linear, the rate of change is constant, so there is no acceleration or deceleration. Which is a bit boring.
In most cases you will want to use your own ease. Expo.easeInOut is my favorite ease. This is something you will come across in many of the cool websites out there.
An ease can be applied on the way out (default), on the way in, or both directions.
\nAll tweens have a efault ease of power1.
Steep curve = fast rate of change
\nFlat curve = slow rate of change
\nThe stagger property allows you to offset the start time of multiple targets in a single tween.
\n// each image will start 0.2 seconds after the previous one starts.\ngsap.to("#team img", { y: -100, stagger: 0.2 })A stagger object gives you greater control over where the staggers start from and how the timing is dispersed.
\ngsap.to("#team img", {\n y: -50,\n stagger: {\n each: 0.2,\n from: "end",\n },\n})each:0.2 means there will be 0.2 seconds between the start of each animation. If instead you use amount:0.2 then all animations will start within 0.2 seconds.
If we mention amount: 1, it means that the start times of all the animation are going to be evenly dispersed over the course of 1 second.
The value of from can be start, end, center, edges.
In order to control a tween you need have way to reference it. Below we set up a variable to reference our tween.
\nconst tween = gsap.to("#box", { x: 600 })Tween’s have a number of methods for controlling playback.
\ntween.play()\n\ntween.pause()\n\ntween.reverse()\n\n// Take the playhead to a time of zero and play forward.\ntween.restart()To prevent a tween from playing automatically you can set its paused special property to true.
var tween = gsap.to("#fred", { x: 600, paused: true })To play that tween you can later call tween.play();.
A timeline is created with gsap.timeline().
All tweens in a timeline naturally play one after the other.
\ngsap.timeline();\n .from("#demo", {opacity:0, duration:1});\n .from("#title", {opacity:0, scale:0});\n .from("#time", {xPercent: 100});The position parameter allows you to offset the start time of tweens in a timeline.
\nconst tl = gsap.timeline()\n\ntl.to(object, { y: 300 }, "+=1") // start 1 second after previous tween ends\n\ntl.to(object, { x: 300 }, "-=1") // start 1 second before previous tween ends\n\ntl.to(object, { rotation: 90 }, "<") // start when previous tween begins\n\ntl.to(object, { opacity: 0.5 }, "<1") // start 1 second after previous tween begins\n\ntl.to(object2, { x: 200 }, 1) // start exactly at a time of 1< - start at the same time as the previous tween.
Timelines have the exact same control methods as tween. Since you already know how to play() a tween you already know how to play() a timeline.
You must first create a reference to your timeline like
\nvar animation = gsap.timeline()Later on you can do:
\nanimation.play()\nanimation.pause()\nanimation.restart()\nanimation.reverse()Labels allow you mark a specific point in time in your timeline. You can add a label to a timeline using the add() method.
const animation = gsap\n .timeline()\n .from("#team img", { y: 160, stagger: 0.5, duration: 0.8, ease: "back" })\n .add("test")\n .from("#time", { xPercent: 100, duration: 1, ease: "bounce" })\n\n// Animation will jump to the last tween.\nanimation.play("test")const master = gsap.timeline();\n\n\nconst yellowAnimation = gsap.timeline()\n .to(yellow, {scale: 0.5})\n .to(yellow, {rotation: 360})\nconst pinkAnimation = gsap.timeline()\n .to(pink, {y: 50})\n .to(pink, {rotation: 360})\n\nconst blueAnimation = gsap.timeline()\n .to(blue, {y: 50})\n .to(blue, {rotation: 360})\n\n\nmaster.add(blueAnimation)\n //we can add position parameters.\n .add(pinkAnimation, “+=2”)\n .add(yellowAnimation)