Timelines

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-19
Updated:
2016-11-20
Tags:
animation Fundamentals libraries JavaScript
This is the most fundamental thing of the course. This will help the most in development.
  • 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 
Codepen to show the timeline visually

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 ​...0.001, "start");​. but  ​start​ is for now at the beginning of the timeline. (not exactly sure what she meant).
Nesting Timelines

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 display

If 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 parameter

blue 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!

CodePen
  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.