GSAP Tweenmax

tweenmax.js

// BASICO
var img = $('img'),
    h2 = $('h2'),
    tl = new TimelineMax();
    
    tl
      //from,fromTo, ou to, (elemento, tempo, opcoes)
      .from(h2,0.3,{y:-15,autoAlpha:0,ease:Power1.easeOut})
      // 0.15 seconds earlier than previous
      .from(img,1,{y:-15,autoAlpha:0,ease:Power1.easeOut},'-=0.15')
      // posicao absoluta, começa aos 3 segundos
      .from(img,1,{y:-15,autoAlpha:0},3);

// LABELS
var tl_2 = new TimelineMax();

    tl_2
      .from(h2,0.3,{y:-15,autoAlpha:0,ease:Power1.easeOut})
      .add('intro')
      .from(h1,0.3,{y:-15,autoAlpha:0,ease:Power1.easeOut})
      // Este vai começar ao mm tempo do local onde ta a label intro
      .from(img,1,{y:-15,autoAlpha:0,ease:Power1.easeOut},'intro')
      // Este tween vai começar depois de 3 segundos da label
      .from(img,1,{y:-15,autoAlpha:0},'intro+=3');

// METODOS TIMELINE

// tl.play() , tl.pause() , tl.resume(), tl.reverse(), tl.restart()
// tl.seek(1) Vai para o 1 segundo da timeline, tambem pode ser label .seek('intro')
// tl.progress(1) Progresso entre 0 e 1, 1 é o fim
// tl.timeScale(8) Aumenta velocidade 800%

// Stagger
var tl_3 = new TimelineMax();
    tl_3
      // staggerFrom, staggerTo, staggerFromTo
      .staggerFrom(array,duracao, {opcoes animacao}, delay entre);
// Loop
var tl_loop = new TimelineMax({repeat:-1});
    tl_loop.fromTo(img,1,{y:0,autoAlpha:0}m{y:15,autoAlpha:1})
            .fromTo(img,1,{y:15,autoAlpha:1}m{y:0,autoAlpha:0});