This content originally appeared on Blog and was authored by Blog
Welcome back to our getting started guide. If you haven't gone through the first part and would like to, you can find it here.
We finished off the last article talking about timelines, let's jump back in...
Timelines
Timelines are how we create adjustable, resilient sequences of animations within GSAP. Here's an example of a simple timeline with three tweens added to it. When we add tweens to a timeline, by default they'll be placed one after another.
// create a timeline let tl = gsap.timeline() // add the tweens to the timeline - Note we're using tl.to not gsap.to tl.to(".green", { x: 600, duration: 2 }); tl.to(".purple", { x: 600, duration: 1 }); tl.to(".orange", { x: 600, duration: 1 });
But what if we want to add a gap or delay in between some of the tweens?
let tl = gsap.timeline() tl.to(".green", { x: 600, duration: 2 }); tl.to(".purple", { x: 600, duration: 1, delay: 1 }); tl.to(".orange", { x: 600, duration: 1 });
One option would be to add a delay to a tween to offset it's start time. But this isn't hugely flexible. What if we want tweens to overlap or start at the same time?
Position Parameter
This is where the position parameter comes in. This handy little parameter is the secret to building gorgeous sequences with precise timing. Here's a demo of it in action.
let tl = gsap.timeline() // start at exactly 1 second into the timeline tl.to(".green", { x: 600, duration: 2 }, 1); // insert at the start of the previous animation tl.to(".purple", { x: 600, duration: 1 }, "<"); // insert 1 second after the end of the previous animation (a gap) tl.to(".orange", { x: 600, duration: 1 }, "+=1");
No matter where you need to position a tween, there's a way to explain that with the position parameter. Let's step through the different values.
Absolute time (in seconds)
// insert exactly 3 seconds from the start of the timeline tl.to(".class", {x: 100}, 3);
Relative time (in seconds)
// add a 1 second gap between this tween and the previously inserted tween. tl.to(".class", {x: 100}, "+=1"); // add a 1 second overlap between this tween and the previously inserted tween. tl.to(".class", {x: 100}, "-=1");
A pointer
// insert at the START of the previous animation tl.to(".class", {x: 100}, "<"); // insert at the END of the previous animation (this is the default) tl.to(".class", {x: 100}, ">");
A complex string
we can use a combination of pointers, absolute times, percentages and relative values to position tweens pretty much anywhere
// add a gap of 50% of this tween's duration (0.5s) tl.to(".class", {duration: 1, x: 100}, "+=50%"); // insert 25% of the way into the previous animation tl.to(".class", {x: 100}, "<25%"); // insert 0.5 seconds before the end of the previous animation tl.to(".class", {x: 100}, ">-0.5");
The best way to learn is to experiment with different values and note how the positions are adjusted!
See the Pen Editable - Position parameter by GreenSock (@GreenSock) on CodePen.
Special Properties
Just like tweens, timelines also have special properties, like repeat and delay, that allow you to control their behaviour.
See the Pen Sequencing - timeline by GreenSock (@GreenSock) on CodePen.
Timeline Defaults
If you find yourself typing out a property over and over again, it might be time for defaults. Any property added to the defaults object in a timeline will be inherited by all the children.
var tl = gsap.timeline({defaults: {duration: 1}}); //no more repetition of duration: 1! tl.to(".green", {x: 200}) .to(".purple", {x: 200, scale: 0.2}) .to(".orange", {x: 200, scale: 2, y: 20});
Controlling your animations
All the animations we've looked at so far play on page load, or after a delay. But what if you want a little more control over your animation? A common use case is to play an animation on a certain interaction like a button click or hover. Control methods can be used on both tweens and timelines and allow you to play, pause, reverse or even speed up your animations!
// store the tween or timeline in a variable let tween = gsap.to("#logo", {duration: 1, x: 100}); //pause tween.pause(); //resume (honors direction - reversed or not) tween.resume(); //reverse (always goes back towards the beginning) tween.reverse(); //jump to exactly 0.5 seconds into the tween tween.seek(0.5); //jump to exacty 1/4th into the tween's progress: tween.progress(0.25); //make the tween go half-speed tween.timeScale(0.5); //make the tween go double-speed tween.timeScale(2); //immediately kill the tween and make it eligible for garbage collection tween.kill();
Clients love to make last minute tweaks to animation! Timescale comes in really handy for speeding up or slowing down complex animation timelines without having to change lots of durations and delays.
Callbacks
If you need to know when an animation starts, or maybe run some JS when an animation comes to an end, you can use Callbacks. Both tweens and timelines have callbacks to hook into.
- onComplete: called when the animation has completed.
- onStart: called when the animation begins
- onUpdate: called every time the animation updates (on every frame while the animation is active).
- onRepeat: called each time the animation repeats.
- onReverseComplete: called when the animation has reached its beginning again when reversed.
gsap.to(".class", { duration: 1, x: 100, // arrow functions can be handy for concise callbacks onComplete: () => console.log('the tween is complete) } // if you have a longer function you can write a regular function and reference it gsap.timeline({onComplete: tlComplete}); function tlComplete() { console.log("the tl is complete"); // more code }
Getter / Setter Methods
Tweens and timelines not only share similar callbacks and control methods, but they also have common methods for getting and setting specific properties of the animation. The most commonly used getter / setter methods are
- time() The position of the playhead (the current time, in seconds) not including any repeats or repeatDelays.
- progress() The tween's progress which is a value between 0 and 1 indicating the position of the playhead where 0 is at the beginning, 0.5 is halfway complete, and 1 is at the end.
- duration() The animation's duration (in seconds), not including any repeats or repeatDelays.
- delay() The animation's initial delay (the length of time in seconds before the animation should begin).
These methods can be used as setters (by passing in a value) or getters (by omitting all arguments).
var tween = gsap.to(".orange", {duration: 1, x: 100}); console.log(tween.duration()); // 1 tween.duration(2); //sets the duration to 2 seconds var tl = gsap.timeline(); tl.to(".green", {duration: 5, x: 200}) .to(".orange", {duration: 5, x: 200}); //the timeline contains 2 sequenced tweens that are both 5 seconds long console.log(tl.duration()); // 10 // Sets the duration to only 2 seconds. // For timelines, that actually alters the timeScale to make it play within that duration tl.duration(2);
Nesting Timelines
It's not just tweens that you can add to timelines. You can even add timelines to timelines! This may sound intimidating but it's actually a really nice way to keep you code tidy and modular
function start() { var tl = gsap.timeline(); //...add animations here... return tl; } function middle() { var tl = gsap.timeline(); //...add animations here... return tl; } function end() { var tl = gsap.timeline(); //...add animations here... return tl; } // stitch them together in a master timeline... var master = gsap.timeline(); master.add(intro()) .add(middle(), "+=2") //with a gap of 2 seconds .add(conclusion(), "-=1") //overlap by 1 second
When we said GSAP gives you tons of control we weren't kidding - you can even use the position parameter to position nested timelines!
This content originally appeared on Blog and was authored by Blog
Blog | Sciencx (2022-07-21T16:03:00+00:00) Getting Started with GSAP – continued. Retrieved from https://www.scien.cx/2022/07/21/getting-started-with-gsap-continued/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.