StevenCM

@GreenSock Thank you for the clarification! That's pretty amazing... ? it actually does! I can see my initial Pen with ScollSmoother is working now while still using descendent elements. I guess this topic can be marked as resolved. ? I'm going to continue building on this one and try to implement all the animations I was initially aiming for, because it used to be a more complex structure with parent / child elements. Fingers crossed. So far so good! Thanks a million for the outstanding support @Cassie and @GreenSock. https://codepen.io/StevenVDB/pen/poLaMGz

@GreenSock thank you for your support. I've forked the previous pen and moved the "data-speed" effect to the images (child) instead of the wrapping containers and it seems to work now. Let me do some more testing and I'll confirm if this problem has been resolved for me. Can I ask 2 more questions please? 1. Why would you call this a band-aid approach / solution? 2. I'm not sure if I really understand why it works now. Both the images (child) and wrapping containers (parents) are at exactly the same location. There is no padding / margin / offset or whatsoever added to them so I was assuming ScrollTrigger's calculations would be the same for both of them? New pen: https://codepen.io/StevenVDB/pen/XWEEEyo

Aha! ? I'm so confused right now. I started investigating in plugins such as LocomotiveScroll to accomplish just that, having a "parallax" effect by scrolling elements at a different speed while animating them when they enter the viewport. And I thought 70% of other users were doing this for the same reason? It doesn't seem like a big deal when you are only trying to animate the opacity as I did in the minimal CodePen demo, but when you add a mask layer on top of the image and animate this mask on scroll with a different speed as the image to get a cool "dragging" effect, things get really messy because of the start of the trigger is off. And the higher the data-speed value the worse it gets. I'm really curious to see what other users think about this and how they would solve it. Did I just earned a Club GreenSock member subsciption as a test-user? ? Thanks for your efforts @Cassie.

Awchhhh... I quickly stumbled upon exactly the same problem with ScrollSmoother. I've enabled markers so you'll see the start of the trigger is off again when I change the data-speed value. ? https://codepen.io/StevenVDB/pen/poLaMGz

Thanks @Cassie ? I fully understand. In the meantime I'm trying out ScrollSmoother on CodePen and it's looking really promising and easy to get started. Let's see where we get and probably save me from getting totally loco. ?

Hello @Cassie, thank you too for your reply. I appreciate it. As I said before, I'm not a developer. I'm a photographer trying to build my own (small static) portfolio website. Doing it myself, and learning on the go gives me full control and understanding of the libraries and plugins. I don't have a problem paying for a plugin such as ScrollSmoother if this resolves the challenges that I'm facing, but I do have a problem with the idea of building my website based on a premium plugin and being stuck with it without having access to future updates, or yearly renew the subscription just for a single plugin on a single website. And again, I'm not here to argue on pricing, nor sound cheap! ? I'm just trying to explain why I tried this implementation before anything else. Reached out to the forums as I assumed someone has tried to do the same thing before and might have resolved it. Best regards, Steven

@GreenSock thank you very much for the swift reply. I see, and I was assuming this was causing the issue. However, there's so many people that have managed to combine ScrollTrigger with LocomotiveScroll. I've studied implementations with both horizontal and vertical scrolling and I'm having difficulties to believe that anyone hasn't stumbled upon this problem or hasn't "fixed" this before. Moving things at a different speed while smooth scrolling with LocomotiveScroll + having full control on animating objects with ScrollTrigger seem like the basic requirements to me to combine these plugins. I know it's not a GSAP issue, I'm just trying to get in touch with someone who has more experience in this matter. I'll kindly say hello to @akapowl via this way to get his attention. ? He seems to have supported a few people here with LocomotiveScroll related posts - thank you in advance. I have seen the ScrollSmoother plugin and really... I would looove to move to a native GSAP plugin for compatibility reasons, but I'm not a developer and I'll probably use it once for a small personal project. I would have to become a Club GreenSock (ShockinglyGreen) member and yearly renew the subscription in order to get updates for ScrollSmoother only in my case. That's why I've tried to implement a free plugin instead. I do understand the costs and the hard work it takes to develop these plugins though, so please don't get me wrong. Thank you again! ?

Hi all, I'm experiencing an issue with Locomotive Scroll + GSAP ScrollTrigger. As soon as I add a "data-scroll-speed" to an element which is different from 0 it seems like the trigger is completely off and I don't know what I'm doing wrong. I would like to start the animation on all the elements as soon as they enter the viewport, this works as long as I don't change the "data-scroll-speed". I've added a minimal demo and the very last element has a "data-scroll-speed" set to 3. As you can see the opacity changes from 0 to 1 but not when the element enters the viewport. I'm quite new to GSAP, Locomotive Scroll and JS in general and I'm hoping someone in the forums can get me back on track. I've tried for countless hours to wrap my head around this, so this is my first post in the forums and my very first Codepen ever :-). Thank you in advance!