[Play timeline in reverse with delay. Seems impossible?]

Wow I just found the solution and it was so simple. I added .delay(0) tho the initial play. Somehow it solved the problem. Hope it will help someone who encountered with the same issue


 

Array.from(awrdBtn).forEach(function (btn) {

btn.onclick = function () {

popupOpen.play().delay(0);

awrds.timeScale(1).play();

};

});

 

awrdBtnClose.onclick = function () {

awrds.timeScale(2).reverse();

popupOpen.reverse().delay(2);

};

[Play timeline in reverse with delay. Seems impossible?]

I have a code that plays existing timelines on button click. I reuse one of the timeline in different places on website. 
The problem is popupOpen timeline with reverse plays correctly first time. And second time it ignores delay 2 seconds and plays instantly.

I tried all possible methods to solve this - wrappet it in setTimeout, setInterval etc. And nothing helps. I just don't understand why. 
 

Array.from(awrdBtn).forEach(function (btn) {

btn.onclick = function () {

popupOpen.play();

awrds.play();

};

});

 

awrdBtnClose.onclick = function () {

awrds.timeScale(2).reverse();

popupOpen.reverse().delay(2);

};

[ScrollTrigger animation jumps and glitches on scrolling back and scrolling in second time]

1 hour ago, Cassie said:

Maybe preventOverlaps could help you? Alternately maybe looking into overwrite modes?

However - as Blake said, if you use one timeline you won't run into these issues. It's by far the easiest solution

If you have four sections in the DOM, make sure that your tweens are equally distributed (timing-wise) into four equal parts and then that'll map to the sections!

Than you. I tried preventOverlaps and it made scrolling forward super smooth (except it skips one trigger for some reason 😮). But scrolling backwards is still jumping and glitching. 

See the Pen zYPEMwO by dmytro-karaulov (@dmytro-karaulov) on CodePen

Unfortunately I don't think it's possible to make it as one timeline because I have different triggers on real website. Each section of the website has it's background. Sections have different size. I am not sure how in this situation I can make it as one timeline. Here is the site, it works almost correctly without scrub smoothing (except last animation starts too early) https://snig-new.webflow.io/

[ScrollTrigger animation jumps and glitches on scrolling back and scrolling in second time]

I figured out that without scrub value (just "true" option) in works perfectly without jumps. But in my case it needs to have smooth scroll animation so scrub value is needed. Is there a way to use scrub in a way animations do not conflict with each other? 

[ScrollTrigger animation jumps and glitches on scrolling back and scrolling in second time]

3 hours ago, GreenSock said:

I agree with everything Blake said. Also, beware that filters are notoriously VERY hard on the browser performance-wise. That's totally unrelated to GSAP. If your animations stutter, it's almost surely a graphics rendering issue. SVG can also be tough on the browser to render, so you've got quite a few things in your setup there that's pushing the browser very hard. 

 

In most cases I've seen, GSAP accounts for less than 2% of the load - the rest is graphics rendering. So I'd recommend focusing your energy on making edits to your setup that'd ease the graphics rendering CPU load (like eliminate filters, reduce the area of change, maybe switch to canvas/WebGL instead of SVG, etc.) 

 

Good luck!

Seems like I didn't communicate issue clearly. Im using canvas rendering so perfomance itself is good. But it seems like I made a mistake in code. It starts another animation imediately after new trigger is reached. Can I set it up somehow in a way it will play smooth like a single animation but with different triggers (on real life website each shape position refers to particular section)?

[ScrollTrigger animation jumps and glitches on scrolling back and scrolling in second time]

Hello everyone. 
I am trying to make smooth background animation where I have an array of shapes that morph between each other and change colors on scroll.
But I am struggling to make this animation smooth. On first scroll it works okay but when I am scrolling back it becomes crazy. And on first fast scroll it works pretty bad as well. Seems like I am missing something. Overall I want to make it seamless and very smooth.
Another question: how can I make shapes change color simultaneously with the body color change? I tried to do that but there is a conflict between different animations. Color change from first animation overrides color change from animation related to the body. 

See the Pen XWzeRbE by dmytro-karaulov (@dmytro-karaulov) on CodePen

[Scrolltrigger SVG path + Canvas]

Thank you @akapowl
Works like a clock.

[Scrolltrigger SVG path + Canvas]

Hello @GreenSock
Thank you so much for your solution. This is exactly what I needed! You saved me.
Is there any chance to change color of the fill with scroll trigger as well on canvas?

[Scrolltrigger SVG path + Canvas]

Hello. I am new to js and GSAP. I am trying to make SVG paths morph on scroll one path to another. I tried to make it outside Canvas but perfomance was very bad on safari and mozila. So I decided to render it on canvas. But I am strugling to make it work. Right now it flickers when I scroll instead of smooth morphing. Seems like there is a problem with on update function but I cannot figure out. Can you help please?
Thanks

See the Pen vYedWEd by dmytro-karaulov (@dmytro-karaulov) on CodePen