Jump to content
Search Community

Repeat all animation one time

Pierre D. test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all =) ,

 

Someone can tell me how i can repeat all my animation just one time (with TweenMax) ?

 

 

 

 

 

Thank you guys :)

... and if you want to elements disappear before repeating you can add next code on timeline before animations of disappearing:

mytl.call(function() {if (!mytl.loop) mytl.loop = 1; if (mytl.loop++ == 2) mytl.pause()});
Link to comment
Share on other sites

  • Solution

By the way, you might want to use timelines all the time because they can be so powerful for this type of thing. Here's a comparison of your old code and what the new one could look like in timeline form. Notice I'm using labels (which you can name more intuitively) and relative timing so that you can very easily tweak the timing and everything adjusts automatically. For example, make the middle section take 1 second longer by adjusting where that label is and BOOM, everything after that gets pushed back too. 

 

//OLD
TweenMax.to(logo,0,{delay:0,alpha:0});
TweenMax.to(logo,1,{delay:1,alpha:1});
TweenMax.to(bot1,1,{delay:3.5,y:"400px",ease: Power2.easeOut});
TweenMax.to(top1,1,{delay:3.5,y:"-400px",ease: Power2.easeOut});
TweenMax.to(top2,1,{delay:6,y:"-400px",ease:Power2.easeOut});
TweenMax.to(bot2,1,{delay:6,y:"400px",ease:Power2.easeOut});
TweenMax.to(textefin,1,{delay:0,alpha:0});
TweenMax.to(textefin,1,{delay:7,alpha:1});
TweenMax.to(cta,1,{delay:0,alpha:0});
TweenMax.to(cta,1,{delay:10,alpha:1});


//NEW
TweenMax.set([textefin, cta], {opacity:0}); //initial state
var tl = new TimelineMax({repeat:1});
tl.fromTo(logo, 1, {opacity:0}, {opacity:1}})
  .addLabel("scene2", "+=2.5")
  .to(bot1, 1, {y:400, ease:Power2.easeOut}, "scene2")
  .to(top1, 1, {y:-400, ease:Power2.easeOut}, "scene2")
  .addLabel("scene3", "+=1.5")
  .to(top2, 1, {y:-400, ease:Power2.easeOut}, "scene3")
  .to(bot2, 1, {y:400, ease:Power2.easeOut}, "scene3")
  .addLabel("scene4")
  .to(textefin, 1, {opacity:1})
  .addLabel("final", "+=2")
  .to(cta, 1, {opacity:1});

You'd also get random access to the whole timeline, so you can jump to any spot like tl.seek(3) or you can hook it up to a slider or repeat it a certain number of times.

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...