Timelines
This is the most fundamental thing of the course. This will help the most in development.Codepen to show the timeline visually
- stack tweens (difficult with CSS)
- set them a little bit before and after on another (difficult or impossible with CSS)
- change their placement in time
- group them into screens
- add relative labels (like "now" and relative to this label)
- animate the scenes!
- make the whole things faster or slower with a single line of code
Talks about "scenes" that happen several times during the complete animation.
Now you can simply change the order of these scenes without fiddling with the details. Or make everything faster with one line of code.
Simple timeline
var tl = new TimelineLite();
//you can add a relative label (optional)
tl.add("start");
//or just add to the timeline without the label
tl.staggerFrom(bP, 3, {
cycle:{
fill:["white", "yellow", "#e23e0c"],
opacity:[0.8, 0.2, 0.5, 0.3],
},
ease:Elastic.easeOut
}, 0.001);
tl.add("start");
adds the relative label. she could have added
Nesting Timelines...0.001, "start");
. but start
is for now at the beginning of the timeline. (not exactly sure what she meant).The way she suggest to do it:
//set properties needed for animation
TweenMax.set($t1, {
perspective: 400
});
// the first scene
function sceneOne() {
var tl = new TimelineMax();
tl.add("label");
tl.to(elem, 1, {vars}, "label");
tl.timeScale(1.2);
return tl;
}
// Create a master timeline
var master = new TimelineMax({options});
// Add the scene function to the master
master.add(sceneOne(), "labelOnMaster");
//use this while you're working to get to a place in time
//master.seek("labelOnMaster+=2");
.set
lets you set properties for your animation. You can add several scenes to
master
(master.add(sceneTwo(), "label");
).seek
you can jump ahead in your animation to the label when you're authoring your animation.
It's in the provided repo (the timeline so that you can play around with it)
No momentary displayIf sometimes (happens often), you have an element in your scene that shows up momentary in the beginning of the animation, but it should only appear later, you can set it's
visibility
to hidden
and turn it on when needed.You need
visibility:hidden
to avoid the flash, opacity
will not work.
//set to hide in CSS
.foo { visibility: hidden; }
//set back in js
TweenMax.set(".foo", {
visibility: "visible"
});
Reply to a question: by default each animation will play after the one that was declared before it. Position parameterblue will follow orange with a 1 sec delay. Or red will start 2 seconds in.
Or add a relative label and start relative to that (purple)
var tl = new TimelineLite();
tl.to(".orange", 1, {x:750})
//this just follows the first
.to(".green", 1, {x:750})
//there is a one second gap between these two tweens
.to(".blue", 1, {x:750}, "+=1")
//this goes to two seconds in
.to(".red", 1, {x:750}, "2")
// add a relative label at this part of the timeline
.add("newLabel")
// tween at 3 seconds past the relative label
.to(".purple", 1, {x:750}, "newlabel+=3");
She likes to work with labels. Percentage based transforms on SVG!Very exciting stuff!
var playBtn = document.getElementById("play"),
tl = new TimelineMax({repeat:1, yoyo:true, paused:true});
tl.staggerTo(".box", 0.5, {x:"100%"}, 0.4);
play.onclick = function() {
tl.restart();
}
For example you can animate anything to 100%, like a position of an element. Great for responsive animation.