Jump to content
Search Community

how to stop infinite timeline and add last .to() to it?

kalreg 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

I use Vue.js and GSAP to make my app working and faced such a problem:
 

		/* load started hook */
        this.tl = new TimelineMax({repeat: -1});
        this.tl.staggerFromTo(bubbles, 0.6, { opacity: 0, scale: 0 }, { opacity: 1, scale: 1, ease: Elastic.easeOut }, 0.05)
        this.tl.staggerTo(bubbles, 0.6, { scale: 0, opacity: 0, ease: Elastic.easeIn }, 0.1)

 

 

This simply makes loader and 3 bubbles scaling and changing opacity. All works fine. But since Timeline is created with repeat: -1 it runs forever. What i want to achieve is that if loading ended hook is invoked my animation still runs, but also another timeline is injected so everything fades away (opacity to 0 while still making main animation runing).

 

What I achieved already is:

         /* load ended hook */

                 this.tl.repeat(0);
		 this.tl.to(bubbles), 1, {opacity: 0 })


It works almost fine however (as expected) animation from loading hook started runs to the end for the one last time, and then fades away "bubbles".

 

What i want to achieve is to run two animations simultaneously - one, from loading started hook to the end, and second fading away - in the same time, but if everything is done - kill both animations.

 

Do i have to make two different TimelineMax()'es ? 

Kalreg

Link to comment
Share on other sites

Thanks for reply, but that doesnt solve my problem. As I said, i need first animation running infinitely, and second one merges, both stop when second ends. Your example uses TweenMax as an addition to timeline, and stops everything immidiately, not when tweenMax ends.

Link to comment
Share on other sites

I'm not sure I completely understand the desired result here, but maybe this will help. You can pause() the repeating timeline, find out how much time is left in the current iteration (to use as the progress tween duration) and then tween the progress to 1. At the end of the progress() tween you can then kill() the timeline. Maybe something like this.

 

See the Pen QVJvRo by PointC (@PointC) on CodePen

 

Does that help? Happy tweening.

:)

 

  • Like 3
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...