Jump to content
Search Community

Trying to loop a TimelineMax from certain point

Devotee007 test
Moderator Tag

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,

 

I try to loop a timelineMax from a certain point. I have set a label, I think, but it starts from the begining, almost. It doesn't matter where I set the label. At the end I want it to wait half a second before it restarts from this line ".set(".txt1Content", {y:-10})". What am I doing wrong?

 

 

        var fadeOutForm = new TimelineMax({repeat:-1});
                        fadeOutForm.fromTo(".background", 10, {y:-40}, {y:0})
                        .to(".formContent", 1, {y: -40, ease:Power4.easeOut}, .1)
                        .to(".formWrapper", .3, {alpha:0}, .2)
                        .set(".txt1Content", {y:-10}, "txt1Wrapper")
                        .set(".txt1Wrapper", {height:"0px"})  
                        .to(".txt1Wrapper", 1.2, {height:"129px", opacity:1, ease:Expo.easeOut}, .6)
                        .to(".txt1Content", 1.2, {y:20, ease:Power4.easeOut}, .6)
                        .to(".txt2Wrapper", .6, {autoAlpha:1}, 1.2)
                        .to(".txt1Wrapper", .3, {opacity:0}, 5)
                        .to(".txt2Wrapper", .3, {alpha:0, onComplete:restart, onCompleteParams:["txt1Wrapper"]}, 5);
                        
 
                       function restart(position)
                        {
                            console.log(position)
                            fadeOutForm.play(position);
                        }
               
//devotee007
Link to comment
Share on other sites

Hi devotee007,

 

Do you think you could make a simple example that we can see what is going wrong? Carl has a post explaining how to make a codepen demo.

 

But, in any case, you might want to choose if you want an infinite timeline repeat new TimelineMax({repeat:-1}) or a repeat onComplete of your last tween .to(".txt2Wrapper", .3, {alpha:0, onComplete:restart, onCompleteParams:["txt1Wrapper"]}, 5).

Link to comment
Share on other sites

Dear GreenSock Team!

 

I didn't find any information about infinity repeat in documentation :(
Spent a lot of time to find this in "MorphSVGPlugin Examples" :unsure:
 
Can you add this info to documentation page?  ^_^
It would be great if there will be simple codepen example or even short video tutorial :P

 

By the way, thanks for a great job! :rolleyes: 

Link to comment
Share on other sites

Hello Rybak, and Welcome to the GreenSock Forums

 

Sorry you were having trouble.. If you go to our Docs page you can see that it is well documented in the various TweenMax and TimelineMax Docs - Special Properties, callbacks and eases:

  • repeat : Number - Number of times that the animation should repeat after its first iteration. For example, if repeat is 1, the animation will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. repeat should always be an integer.

Also if you search on the Docs page for repeat  you will also see repeat indefinitely , use -1 on the repeat() method page as well:

 

Keep in mind that repeat and yoyo are only available in TweenMax and TimelineMax. TweenMax extends TweenLite and adds even more capabilities like repeat, yoyo, repeatDelay, on-the-fly destination value updates and more.

 

If you have any other questions feel free to ask :)

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...