Rinku Samanta

Hi Guys, I am trying to implement some scroll animation on react but there seems to one issue I am facing where animation do not fully complete when scrolled a bit too fast. Here is codesandbox url(sorry i tried to do it on codepen but importing package makes thing too complicated there) https://codesandbox.io/s/gallant-sid-24hsp?file=/src/styles.css:0-332 Can someone check and point me out on what am I missing or doing wrong.

Hey thanks Jack for point out my mistake, I am relatively new to GSAP and animation stuffs so don't know all the properties in much details. Your solution and advice are really helpful. Thanks again...:)

Hello folks, I am trying to do a simple scroll animation where one div leaves and other div enter on scroll. The animation somewhat works when scrolled slowly but when scrolled very fast, the leave and leaveback animation do not trigger sometime. I can see the console log for the onLeave() and onLeaveBack() hooks of scrolltrigger but the animation do not trigger. I am stuck on what cause this bug so any help regarding this would really be appreciated.

Hi ZachSaucier, Thank you for responding on this. Firstly the intro video link is giving 404 so I don't know about what content it has. Secondly I though I provided enough information about the animation I want to achieve. Basically, I would like to achieve the animation foretold above using scrolltrigger. I was half successful but could figure out how to transition one element after the other based on scroll progress. I don't have any live website example for it. Otherwise it would have been a bit simpler.

I have one section with class pinned and it has some list -items(the list-items are dynamic meaning there can be 4 or 6 list-item depending on response from api). Now the animation, I want to achieve is that on scroll, the section with class "pinned" should get pinned and each list-items will fadein and fadeout(if first leave then second enter), one by one according to the scroll progress. So at a time only one item will be visible at center of the section. We can kind of think it as fade carousel, where the fading in and fading out of each items is based on the scroll progress. Once all the list item have been animated the pinning will be removed. This question may have been asked before but I couldn't find it so if someone can point me to the example that will fine too.

Hello, I am trying to achieve a scroll scrubbing animation. Basically I want to pin the canvas element and play the canvas animation. I have achieved the animation using windows mousewheel event but I would like to know how to set it up using scroll trigger pin property and play the requested 234 frames in sync. The idea was inspired from apple iPod page. https://www.apple.com/airpods-pro/. Thanks.

Hello, In my react application, there are three section with class .cts which contains image and some content. All the three section is wrapped in a main container. Now I have implemented the animation as follow: const scrollColorElems = document.querySelectorAll(".cst"); scrollColorElems.forEach((colorSection, i) => { console.log(colorSection.clientTop); const prevColor = i === 0 ? "gray" : scrollColorElems[i - 1].dataset.scrollcolor; ScrollTrigger.create({ trigger: colorSection, start: "top center", end:"bottom center", markers:"true", onEnter: () => gsap.to("#ftiot", {backgroundColor: color, overwrite: 'auto'}) // onLeaveBack: () => onLeaveBack(prevColor), onEnterBack: () => gsap.to("#ftiot", {backgroundColor: color, overwrite: 'auto'}), }); }); Now the problem I am facing is the start marker keeps changing its position and become pretty inconsistent. In the below screenshot you can see the start marker is way below the top offset marked by black border of the trigger container even though I have specified "top center" as starting point in start property.

Hi Richard, Thank you very much for the discussion reference. It is exactly what I am trying to achieve right now.

Hi Mikel, this option is exactly what I was looking for but I want to smooth out the color transition effect. Right now its abruptly changes from red to blue and blue to aqua. I think scrub might help in this but I would like to know whats your take on this.

Hello I would like to create a animation where there are three section on a main container. Now whenever each section enter the viewport I would like to transition the background color of main container. For example when section 1 enter background color for main container is red, for section 2 it is rebecca and for section 3 it will be aqua. How should I implement this using scroll triggers? The reference for this animation can be found on https://www.yalantis.com website.