Jump to content
Search Community

Block timeline execution if child tween is infinite

Pavel Zhuravlev test
Moderator Tag

Recommended Posts

Hello!
Im trying to create user-controlled complex timeline.
Timeline has step-by-step animations which should be paused after each step and continue only after action from user. While timeline is waiting for action it should show infinite animation which is unique for each step.

I was assuming that infinite animations blocks timeline execution until they will be killed and i can implement this logic using pauses and 'repeat: -1'. Seems like it was right assumption for GSAP 2. But GSAP 3 proceed timeline even if current step is infinite.

Can you please help me understand how can i achieve described behavior using the most elegant and clean solution because timeline will have many steps.

Thanks!

See the Pen QWpepvp by prod_zhuravlev (@prod_zhuravlev) on CodePen

Link to comment
Share on other sites

2 hours ago, Pavel Zhuravlev said:

Seems like it was right assumption for GSAP 2. But GSAP 3 proceed timeline even if current step is infinite.

 

If I remember correctly, I think it was changed to prevent such things from happening.

 

I guess you could try a really high number for the repeats.

 

How about like this?

let pulse;

const tl1 = gsap.timeline({paused: true})
.to('.box1', {x: '+=100'})
//waiting animation start
// .to('.box1', {scale: 2, yoyo: true, repeat: -1})
.addPause("+=0", startPulse)
.add(stopPulse, "+=.01")
//waiting animation finished after user action
.to('.box1', {x: '+=200'}, "+=1")

function startPulse() {
  pulse = gsap.to(".box1", {
    scale: 2,
    repeat: -1,
    yoyo: true
  })
}

function stopPulse() {
  pulse && pulse.kill();
  gsap.to(".box1", {
    scale: 1
  });
}

 

Link to comment
Share on other sites

2 hours ago, OSUblake said:

If I remember correctly, I think it was changed to prevent such things from happening.

Typically when you insert any tween/animation, it adds it to the END of the timeline and by "end" I mean the exact time at which ALL child tweens finish. But if you have a child that repeats infinitely (repeat: -1), can you see why that would be a problem? The next tween would be infinitely in the future. That's almost never what users actually want. It was snagging quite a few people. So a long time ago we added logic to sense infinitely-repeating animations and only factor in their first iteration. That's almost always the desired behavior anyway. 

 

I think it's much better/cleaner to approach things like Blake suggested where you're not embedding your infinitely-repeating animations inside of a timeline, but instead just treat them as external entities. It makes more sense anyway because you've got conditional logic - timelines are usually for animations with fixed timing that should always play the same way each time. 

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