Akash Ranjan

Thanks @Cassie this worked fine. I tried many ways but did not know that I can do it this way also. Many thanks

Hi, I am trying to achieve an effect where the font size increases as the animation progresses (like just what scrub do) and decreases as the font size of next element increases. But i am unable to achieve this effect with SCRUB property. I tried many methods but i am not sure how to achieve it. Can you guys please help me. Thanks alot.

Thanks for the insight @alig01. Just one confusion though. So suppose if I put everything in a timeline like you mentioned should I add delay if I want that element to stay a little longer once it has appeared because currently I am using different scrolltrigger values to trigger the animation. Thanks

Hello, I want to animate single element multiple times with scrollTrigger. I am using fromTo method everytime I animate. I want to know if this is the right way to do so or there is a better way to do this. Please see codepen for reference Thanks alot

Hello, I was working with self.progress in scrollTrigger to change the state whenever a certain progress is reached. Please see the below code useEffect(() => { tl.current = gsap.timeline().to(doputMain.current, { scrollTrigger: { start: "0 0%", end: "100% 100%", trigger: doputMain.current, scrub: 0.5, // markers: true, onUpdate: (self) => { if (self.progress > 0 && self.progress < 0.2) { setdoputText(0); } if (self.progress > 0.2 && self.progress < 0.4) { setdoputText(1); } if (self.progress > 0.4 && self.progress < 0.6) { setdoputText(2); } if (self.progress > 0.6 && self.progress < 0.8) { setdoputText(3); } if (self.progress > 0.8 && self.progress <= 1) { setdoputText(4); } } } }); }, []); I was wondering if there is any way to make it dynamic so that no matter how many elements are there in the state it automatically divides the progress equally to them. For example currently my code has 5 elements so the progress is divided by 20% but if the number increase to 6 then I don't have to add one more line and change everything again. Here is a sandbox for DEMO https://codesandbox.io/s/suspicious-poincare-xc5jc5?file=/src/App.js Thanks a lot

Thanks a lot @Cassie you are a life saver. I was thinking that there are multiple elements with same name so I have to loop them. Thanks a ton again

Thanks alot @GreenSock, This is exactly what I was looking for. Also I am facing a similar issue in this codepen where I have stacked three layers on one another and sticking them with position sticky. I am applying css clip path to reveal them one by one but all of them are working together. Can you let me know how I will enable animation after the previous one is finished with slight parallax effect. https://codepen.io/akashrwx/pen/mdLWvve Thanks alot

Hi, I want to achieve random stagger effect with scrollTrigger batch function. To be more clear as seen in the codepen there are 5 boxes which are appearing one after another I want to achieve an effect where boxes appear randomly like (2,4,1,3,5). Please help me. Thanks alot

Hi @Cassie, Thanks for this I figured this out after posting in the forum 🤦‍♂️. Although I am struggling to keep the last class added in the target. For example if the last element passes from its view port its class also gets removed but i want that last class to stay. Can you please help me with that. Thanks again

Hi, Is there any way to target another element for adding class while the trigger elements enters and exits viewport. Like a target prop or something. Or just add animation to another set of images. In the below code I am trying to add "active" class to the target element ".anim-phone-image" but i guess there is no such property 😅. Please help me out useEffect(() => { const scrollTexts = gsap.utils.toArray('.anim-text'); scrollTexts.forEach((item, index) => { tl.current = gsap.timeline({ scrollTrigger: { trigger: item, scrub: true, start: 'top 30%', // start when top of trigger target hits 50% point of viewport end: 'bottom 10%', toggleClass: `active-${index}`, markers: true, target: '.anim-phone-image', }, }); }); }, []);

That is exactly what i was looking for thanks a lot @OSUblake.

Yes like a counter of some sort. counting from 0% to 100%

Hi @OSUblake, By preloading i mean loading all the frames then playing the animation as currently there is a stutter between frames as it looks like some frames are not loaded.

Hi @OSUblake, Can you help me with preloading the image sequence in the canvas. I have searched everywhere but i am unable to find any solution. This is the same code I am using for my animation. The issue is that my images are around 7mb in total. https://codepen.io/GreenSock/pen/MWOpwBa Thanks

Hey @OSUblake, I just noticed one small bug. It is something I always fall prey off. So the scroll trigger start points move out of place on page load which I found i due to fonts. So basically the browser loads fonts little later which changes the height of viewport. Can you tell me how I can reload the scrolltrigger positions once the page is completely loaded