TaiwoJazz

I will go back and come up with a better logic for this. Thanks.

@GreenSock Thanks for taking time to provide the above demo. I tried as much as possible to keep it simple in the first demo i provided above. I didn't include the snapping feature as it makes it more unnecessarily complex. I have made some changes and i have achieved 100% of the desire result, thanks to your demo. I think this code monitoring scrollY is causing the flicking so i fixed that by removing the below key: value pinType: 'transform', My forked demo can be found here https://stackblitz.com/edit/react-a8iwqz?file=src%2Fviews%2FLayers.js,src%2Fstyle.css

Hi guys. It's me again. I'm trying to achieve this animation where the text get it's original color and also remove the image overlay. I think my current logic can be better and i shouldn't have to create multiple timelines but i'm kind of lost in it. Here is my demo https://stackblitz.com/edit/gsap-react-basic-f48716-59toq4?file=src%2FApp.js The text on the left and the image on the right are supposed to play together and change to the next one till the last item and then we unpin.

@RodrigoTanks for the help @GreenSock Thanks for the help. The animation will work as expected if the panel height is lesser than 100vh but not more then 100vh. This was the problem i was facing before. As Rodrigo has previously said, i may have to make sure that the panel height are 100vh to achieve that effect.

Waoo, thanks for that observation, I just noticed that now. You are right. First of all, the minimal demo was actually created from this starter template https://stackblitz.com/edit/react-6rzfpp?file=src%2FApp.js Let's focus on the Layers page. The issue is that, the sections in the layers page must be 100vh. What we have content that are more than 100vh, and i still want to maintaining the layers animation. Once we scroll down to the end of each layers, it looks like it's pin while the other section overlay it. But this time, the height is not mandatory 100vh

I made a little bit of modification to React layer pinning but i noticed that it only work with fixed height and "top: 0" css set on the ".panel" If the top: 0 is comment out, the first page will scroll the entire height but the layer will no longer work. Here is a link to the my minimal demo https://stackblitz.com/edit/react-1af7mc?file=src%2Fviews%2FLayers.js,src%2Fstyle.css

Yeah. Much understood now. Really appreciate your time. 💯

@Rodrigo I must say that i really do appreciate your effort and you time. Sometimes it can just be very funny considering that fact that i kept looking at that component and i didn't notice that added line. I was more fixed on Scroll.js component. Thanks a lot. God bless you.

Check this yet?

You the best @Rodrigo I hope you enjoyed your vacation and we didn't bother you too much gsap issues lol

Got it. Thanks. 💝

I think the thread you sighted has lost the context. Looks like the user updated his code with your solution so i was unable to actually see the changes form the code you make changes to and the changes you make to the code in the Scroll.js file

Nice. I understand how things work here during the weekend. I just want to properly understand which is better: Tag a moderator or create a new Thread Thanks a lot for the clarification. Appreciate it. ❤️

Thanks for the @Cassie But is there a community guidelines?

Quick clarification: I acknowledge that the moderators in this GSAP forum are putting in significant effort to address all the questions and issues. However, I would like to clarify the proper way to utilize this community without violating any guidelines. If a question hasn't been marked as solved or, for some reason, has been pushed down due to other inquiries, what is the best approach to bring the question back up without resorting to unnecessary tagging of moderators, as this is also against the rules? Thanks