Vilas

After more tinkering, i think i found a solution: https://codepen.io/Valentin-Ilas/pen/ZEZNVRX?editors=1111 Basically I'm using tl.add() to run animations independently from the scrub on the parent container. Then i can specify for each one where during the progress it should run. Seems to work backwards too. But is this approach efficient? or do you see any performance issues?

I've been trying to use the position parameter and I feel like I'm close but not quite there yet I noticed some interesting behaviour: if scrub is set to true, then the a duration seems to be needed. So i added duration: 100 which seems to work more as a percentage If i use the position parameter on each block, with values such as 20, 30 50 etc, they seem to trigger based on the percentage as well. Now what i can't seem to be able to do is to make the fade-in more animated instead of running it instantly and how to control the duration of the fade in. Please see the example below: https://codepen.io/Valentin-Ilas/pen/abxrRYe

Hi Rodrigo, I tried to illustrate it in the following codepen but I think i didn't get it quite right. So the idea is that there is a pinned container which is connected to a scroll trigger and at precise moments in the timeline, for example when the progress is 0.3 then the block 1 should appear. If the progress goes to 0.74 then block 2 should appear. All 3 blocks are in the same position just only 1 visible at a time. https://codepen.io/Valentin-Ilas/pen/abxrRYe?editors=1111

I have 3 blocks of text which appear as you scroll and I am fading in each one depending on where in the timeline the progress is. I am wondering if there is any more efficient way to do this as the code below looks very redundant tl.to(blocks,{ ease: 'power1.inOut', duration: 100, onUpdate: function () { const progress = tl.progress(); if (progress > 0 && progress <= 0.5) { gsap.killTweensOf([block2, block3]); // Cancel ongoing animations on block2 and block3 gsap.to(block1, { opacity: 1, y: 0, duration: opacityDuration }); gsap.set(block2, { opacity: 0, y: 15, }); gsap.set(block3, { opacity: 0, y: 15, }); } else if (progress > 0.5 && progress <= 0.7) { gsap.killTweensOf([block1, block3]); // Cancel ongoing animations on block1 and block3 gsap.set(block1, { opacity: 0, y: 15, }); gsap.to(block2, { opacity: 1, y: 0, duration: opacityDuration }); gsap.set(block3, { opacity: 0, y: 15, }); } else if (progress > 0.7 && progress <= 1) { gsap.killTweensOf([block1, block2]); // Cancel ongoing animations on block1 and block2 gsap.set(block1, { opacity: 0, y: 15, }); gsap.set(block2, { opacity: 0, y: 15 }); gsap.to(block3, { opacity: 1, y: 0, duration: opacityDuration }); } } }, '<');

Thank you guys! I have a rather long page with 3-4 sections in between which are dynamic and slow. Simply using the .sort() method didn't work But using the verticalSort() helper function you suggested did the trick. I just had to include ScrollTrigger.refresh() after the sorting to make it work properly: function verticalSort() { let scroll = window.scrollY; ScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + window.innerHeight); ScrollTrigger.sort((a, b) => a._sortY - b._sortY); ScrollTrigger.refresh(); }

I think I have the exact issue as you. Is it the same as here? Basically a section that loads a bit slow, will mess up the triggers in the sections after it

Hi guys, I created this super basic codepen file to illustrate the issue. So the problem is that the middle section is waiting for some data before initializing the scrollTrigger+pinning. Once the data is loaded and the pinning happens, it throws off the position of all the scrollTriggers below it. Running scrollTrigger.refresh() doesn't seem to do anything in this case. How can i re-calculate the position of all the scroll triggers once the data finishes loading?

This is awesome! Thank you so much! So using the .call function injects the callback into the timeline and runs is every time the animation plays? but with updated parameters? That seems super useful!

Hi guys, I have a gsap timeline which animates an svg circle. (Scale and color). What I'm trying to achieve is to pass a dynamic color when clicking different buttons, for example: buttonA.addEventListener('click', (e)=>{runAnimation(DYNAMIC_VALUE)}); and then use that value here: tl.to(circles, { stagger:{ each: 0.05}, ease: "none", fill: `#${DYNAMIC_VALUE}` }) It seems that the dynamic value is always using the initial value but can't be changed later. Any idea on how to bypass this issue? Edit: seems that using a function + tl.invalidate() works, however, spam clicking the button seems to break the animation. Any ideas? Thank you in advance!