Using functions to build a timeline

[Dipscom]

I wonder if this is something that has been discussed or not before. Did a quick search in the forum but not even sure how to phrase it so, do forgive me if this is pretty obvious and I am just being thick.

 

In this wonderful world of banner development I generally find myself repeating the same steps over and over again. To which, one just creates a class or a function to automate something or to simply minimise the risk of H.E. due to typos.

 

One thing I have tried time and again but always failed is to work out a way to build a timeline programatically, as in, feed a function some parameters and that function will add tweens to the timeline, which I can later control.

 

See the Pen XmJZPZ by dipscom (@dipscom) on CodePen

. I know many ways to achieve many things writing the code myself BUT I do want to avoid the bellow, for example:

tl
    .to([opening_01,opening_02,opening_03], dur, {autoAlpha:0}, hold)
    .from(copy_01, dur, {x:"-30%", autoAlpha:0})
    .from(copy_02, dur, {x:"+30%", autoAlpha:0}, ("-="+dur))
    .from(chauffer, dur, {autoAlpha:0}, ("-="+dur))
    .to([chauffer,copy_01,copy_02], dur, {autoAlpha:0}, hold);


    tl
    .from(copy_03, dur, {x:"-30%", autoAlpha:0}, ("-="+dur/2))
    .from(copy_04, dur, {x:"+30%", autoAlpha:0}, ("-="+dur))
    .from(lounge, dur, {autoAlpha:0}, ("-="+dur))
    .to([lounge,copy_03,copy_04], dur, {autoAlpha:0}, hold);


    tl
    .from(copy_05, dur, {x:"-30%", autoAlpha:0}, ("-="+dur/2))
    .from(copy_06, dur, {x:"+30%", autoAlpha:0}, ("-="+dur))
    .from(bedhead, dur, {autoAlpha:0}, ("-="+dur))
    .to([bedhead,copy_05,copy_06], dur, {autoAlpha:0}, hold);


    tl
    .from([endcard_01,endcard_price], dur, {x:"-30%", autoAlpha:0})
    .from(endcard_02, dur, {x:"+30%", autoAlpha:0}, "-="+dur)
    .from(helloTomorrow, dur, {autoAlpha:0})
    .from([cta,terms,arrow], dur, {autoAlpha:0});

As you can see, there's a lot of redundant code here that could simply go in a function. But try as I might, I have not yet cracked it.

 

I know what the code is doing wrong in the CodePen example - It is calling the .add() over and over again, adding its relative position to the target box. And on the alternative version, because it is a normal Tween, it cannot be controlled by TimelineLite.

 

Any takers?

 

[Carl]

Hi

 

I moved this question out of the Banners forum and into GSAP as it is very closely related to the GSAP API. 

The banners forum is more for discussion about networks, publishers, cdns and other weird things specific to banners. 

 

Another reason, this is the best question you could possibly ask. 

 

Being able to write a few functions to generate similar animations is a huge timesaver. Due to the flexibility of GSAP it is an incredibly powerful technique that allows you to generate animations and glue them all together into a single timeline.

 

The important thing is that the functions that create the animations must also return them.

In your example you were using functions to create animations, but they never made it into your timeline.

 

Here is an example that shows how to use functions to return a single tween and a single timeline.

I tried to keep the animation as basic as possible so you could focus on the structure and functionality of the code:

var main = new TimelineMax();

//this function creates and returns a single tween that can get added to a timeline
function introBox(selector, duration, color){
  var anim = TweenLite.to(selector, duration, {x:200, backgroundColor:color});
  return anim;
}


//this function creates and returns a single timeline that gets added to a timeline
function outroBox(selector){
  var anim = new TimelineLite()
  anim.to(selector, 0.5, {x:400})
      .to(selector, 0.5, {rotation:360})
      .to(selector, 0.5, {scale:0});
  return anim;
}


//build your banner by calling functions that return animations to you!


//add an animation that moves #box01 for 0.5 seconds and turns the color blue
main.add(introBox("#box01", 0.5, "blue"))
    .add(introBox("#box02", 1, "green"))
    .add(introBox("#box03", 2, "pink"))


    .add(outroBox("#box01"))
    .add(outroBox("#box02"))
    .add(outroBox("#box03"))

http://codepen.io/GreenSock/pen/bVNMQZ?editors=001

 

 

Its the exact same technique we use on our homepage animation: http://codepen.io/GreenSock/pen/yhEmn

Each section is generated by a function, and then we just glue them all together with add()

master.add( whyGSAP() )
.add( performance(), "-=1")
.add( compatibility(), "-=0.5")
.add( transforms(), "-=3.6")
.add( animateAnything(), "-=0.5")
.add( control(), "-=0.5")
.add( newStandard());

 

 

This is the key to becoming true GSAP master!

[Dipscom]

Yes, yes, makes perfect sense once it makes sense.

 

Typically the bit that I am missing is a tiny little detail but, to be honest, I do prefer it like that, makes it easier to digest and understand.

 

Obviously it was going to be either return or this. I whenever I think I understand them, I get a new lesson...

 

Thank you very much, Carl. This will open a floodgate of refactoring and code optimization.