looping banner + TweenLite vs TweenMax

[gammagrace 0 Likes (Newbie)]

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

[Oliver16Years 207 Likes (Specialist)]

Hi,

 

Best if You make a Timeline and chain the tweens in it like this:

 

var tl = new TimelineMax( { repeat: -1 } );

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

 

The -1 value of the repeat: key means infininte loop.

 

If You worry about the file size just link GSAP from CDN:

 

<script src = 'https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.1_92cf05aba6ca4ea5cbc62b5a7cb924e3_min.js' ></script>

 

 

[gammagrace 0 Likes (Newbie)]

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

 

 

 

 

[Oliver16Years 207 Likes (Specialist)]

Sure,

 

As You can see we are able to add function calls to the timeline at any point in time.

 

.add( function() { if ( !loop ) { tl.stop() } } )

 

With this You can count the loops or stop the timeline at any point if the number of the loop is the desired.

 

Check out the docs for more timeline control methods:
https://greensock.com/docs/TimelineMax