heim_designs

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); };

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); };

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. https://codepen.io/dmytro-karaulov/pen/zYPEMwO 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/

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?

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)?

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.

Thank you @akapowl Works like a clock.

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?

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