[Scrolltrigger timeline pause/resume not working as expected]

1 hour ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

I really appreciate your reply. Tried commenting the code as you suggested and found the issue, which wasn't related to GSAP.

[Scrolltrigger timeline pause/resume not working as expected]

I have a long ScrollTrigger timeline that plays other mini timelines(not ScrollTriggered) on onStart /onComplete and onReverseComplete events. Once one of these mini timelines are executed, they animate(in and out) some SVG elements and display a button which if clicked opens a modal with scrollable content.

So when the modal is visible, I use:

ScrollTrigger.getById(<id>).disable(false)

to pause the ScrollTrigger timeline to prevent the animations.

Once the modal is closed, I use:

ScrollTrigger.getById(<id>).enable(false)

to resume it.

As soon as it resumes, it plays from the point where it was paused but it immediately executes all the mini timelines which were executed previously.

What can I do to prevent that? Thank you!

[TimeLineLite logic not restarting smoothly]

Hello everyone,

First time using this, so please excuse my terminology. I'm doing a THREE.js animation loop, where a bunch of textGeometries animate forming a box, sphere and cone. I'm using two timelines since I don't want the first transition(from initial state to forming a box) to repeat. So when restarting the second timeline on `onComplete`, it isn't doing a smooth transition. I'm unable to track down what's causing this, could anybody please help me figure out why the restart isn't smooth?

Below is the logic, followed by a codepen demo:

 

for (i = 0; i < MAX_PARTICLES; i++) {
  var initialMorphTL = new TimelineLite();
  var morphTL = new TimelineLite({onComplete:function(){this.restart()}});
  const child = children[i];

  initialMorphTL.to(child.position, 1, {
    ease: Elastic.easeOut.config( 0.1, .3),
    x: pointsInsideBox[ index ++ ],
    y: pointsInsideBox[ index ++ ],
    z: pointsInsideBox[ index ++ ],
    delay: .1
  }).to(child.material.color, 1, {
    ease: Linear.easeNone,
    r: boxColor.r,
    g: boxColor.g,
    b: boxColor.b,
  }, "-=1");

  morphTL.to(child.position, 1, {
    ease: Elastic.easeOut.config( 0.1, .3),
    x: pointsInsideSphere[ index ++ ],
    y: pointsInsideSphere[ index ++ ],
    z: pointsInsideSphere[ index ++ ],
    delay: 5
  }).to(child.material.color, 1, {
    ease: Linear.easeNone,
    r: sphereColor.r,
    g: sphereColor.g,
    b: sphereColor.b,
  }, "-=1").to(child.position, 1, {
    ease: Elastic.easeOut.config( 0.1, .3),
    x: pointsInsideCone[ index ++ ],
    y: pointsInsideCone[ index ++ ],
    z: pointsInsideCone[ index ++ ],
    delay: 5
  }).to(child.material.color, 1, {
    ease: Linear.easeNone,
    r: coneColor.r,
    g: coneColor.g,
    b: coneColor.b,
  }, "-=1").to(child.position, 1, {
    ease: Elastic.easeOut.config( 0.1, .3),
    x: pointsInsideBox[ index ++ ],
    y: pointsInsideBox[ index ++ ],
    z: pointsInsideBox[ index ++ ],
    delay: 5
  }).to(child.material.color, 1, {
    ease: Linear.easeNone,
    r: boxColor.r,
    g: boxColor.g,
    b: boxColor.b,
  }, "-=1");
}

 

See the Pen ExPybaO?editors=0010 by zainy (@zainy) on CodePen