[looping banner + TweenLite vs TweenMax]

Hi Oliver!

 

Thanks so much for your quick reply. I am working on trying the code you posted above. When I get it working I will post here via codepen page.

 

Also, I came across this example, which includes something else I need in my banner.

Basically I need the banner to repeat 3 times, and when it finishes the 3 loops, I need it to end displaying the 4th of 5 frames. I hope that makes sense.

This example kind of does that:

See the Pen WQaMez by MAW (@MAW) on CodePen

But I wasn't able to change the number of loops. This one does what I need but only loops 2x. If it's not a bother could you help me to understand what the trick is to get this to loop 3 times and end on the second to last frame?

 

Again thank you so much for any help. I am really loving animating this way, but am still at well within the learning curve process.

 

Grace

 

 

 

 

[looping banner + TweenLite vs TweenMax]

Hello, I am new to using GSAP, so apologize for these basic questions.

 

I am creating a banner and need to loop it x# of times.

Can I do this with TweenLite, or do I need to use TweenMax? Could you recommend an example which loops for me to see the script in action?

 

And... based on this sample of the (unfinished) script, could I use TweenLite?

I don't think I have anything very robust here, so would prefer to use Lite to save on file size.

 

TweenMax.from('#hed1', .5, {delay:.2, alpha:0, y:'-=20'})
TweenMax.from('#orange_boat',2, {delay:3.75, top:'+=150', left:'-=350', ease:'Quad.easeOut'})
TweenMax.from('#whiteboat_one',2, {delay:0, top:'+=0', left:'-=0', ease:'Quad.easeOut'})
TweenMax.from('#whiteboat_two',2, {delay:0, top:'+=0', left:'+=0', ease:'Quad.easeOut'})
TweenMax.to('#hed1', .3, {delay:4, alpha:0, y:'-=75'})
TweenMax.to('#orange_boat',2, {delay:6, top:'+=128', left:'+=38', width:'140px', ease:'Quad.easeOut'})
TweenMax.to('#whiteboat_one',2, {delay:6, top:'+=0', left:'-=0', width:'99px', ease:'Quad.easeOut'})
TweenMax.to('#whiteboat_two',2, {delay:6, top:'+=30', left:'+=30', width:'80px', ease:'Quad.easeOut'})
TweenMax.from('#hed2', 1.5, {delay:7, alpha:0, top:'+=0', ease:'Back.easeOut'})
TweenMax.from('#cta', 1, {delay:4,alpha:0})
TweenMax.from('#cta>em', .5 , {delay:4.5, alpha:0});
TweenMax.to('#cta',.5, {delay:5,'backgroundColor':'rgba(200,255,255,1)', repeat:3, yoyo:true});

 

Thanks for any help on this!

gg