Carl

Hi @PapaDeBeau I think the main problem was just the syntax / formatting in the eventlisteners. When using multiple lines in an arrow function you need the {} https://codepen.io/snorkltv/pen/eYbVPPm?editors=1010 item.addEventListener("mouseleave", () => { console.log("Still works") one.reverse() }); Also in your loop item is the button with a class of ".Amazing" so I don't think you need to do item.querySelector(".Amazing"), you just need to animate each item. also, be careful with from tweens on buttons. you don't want them moving away from the mouse when you enter them because then they could trigger the mouseleave immediately. Glad to hear you enrolled in the classes! I'm sure if you put in the time and practice you find a wealth of information in there. Carl

I can't really dig into all your code, nor do I really understand the latest question. However, if you feel that markers are thrown off somehow this is usually a side-effect of animating the trigger. In other words, don't make the trigger (section) the same thing as the target of your tweens. ScrollTrigger needs to measure the y distance of the trigger in order to position the markers, start, and end values. Animating it causes trouble. use a structure like <section class=trigger"> <div class="thingToAnimate"></div> </section> ScrollTrigger.create({ trigger:".trigger", animation:gsap.to(".thingToAnimate", {y:200}); }) one way to test if this is the issue is to just make your animation change the opacity of the section. If things work well this way that means that animating the y of trigger is the issue.

Hi and welcome to the GreenSock forums, Thanks for the demo. The right way in my opinion would be to use the MotionPath Plugin. Here are 2 demos I used in recent lessons in my course SVG Animation with GSAP. https://codepen.io/snorkltv/pen/zYyBKmG https://codepen.io/snorkltv/pen/JjwJrqq Hopefully these help

glad to see you got the help you needed. here are a few additional examples from my GSAP courses that may help with the ScrollTrigger implementation. https://codepen.io/snorkltv/pen/jOVoYXg https://codepen.io/snorkltv/pen/KKNEYqw?editors=0100

oh and here is a similar result with a different layout. notice the right side gets pinned while the rest of the page naturally scrolls by. there is no need to animate the content with a tween. This is the start of a much more elaborate lesson in my ScrollTrigger course, but maybe it helps too https://codepen.io/snorkltv/pen/oNaNgLg?editors=1010

Hi and welcome to the GreenSock forums. Thanks for the clear demo. It shows you're really trying. You did a good job of setting things up. However, getting this done right takes a bit of experience with the subtleties of the API. You'll need to really understand things like pinning, function-based values, dealing with responsive settings etc. I've done something similar in a recent lesson so I was able to quickly make some modifications. https://codepen.io/snorkltv/pen/JjwMBmm?editors=0110 Note: a big part of what you need is to figure out how far the yellow boxes need to move. I did this in the getScrollDistance() function. With invalidateOnRefresh set to true that function will re-run automatically on resize. Hopefully this demo is enough to give you something to experiment with. Be sure to study all the ScrollTrigger properties in the docs as that will help greatly. If you want to do more with ScrollTrigger and GSAP I encourage you to check out my GSAP course bundle, I cover all these things in detail. Good luck on the project! Carl

thx for the demo. I've never had to use this but check the ScrollTrigger docs for pinnedContainer. i think setting it to "main" on the second ScrollTrigger solves your issue. https://codepen.io/snorkltv/pen/MWZoEgp?editors=0010 be sure to thank @GreenSock for adding all these wonderful features

Nice job, @Toso. very cool!

update. I did end up making a complete tutorial on this effect and it's on YouTube: Here's the finished demo too: https://codepen.io/snorkltv/pen/poxvOLL/36e8db0379aa8cbac7608b0ff0d1f46d

Hi and Welcome to the GreenSock forums, Thanks for the demo. It seems you might want to take a few steps back here and get 1 card to flip the way you want before you worry about a lot of cards or even hooking up ScrollTrigger. Here's a demo from one of my courses, perhaps it will help you get your cards setup in a simpler fashion https://codepen.io/snorkltv/pen/VwKGVjb?editors=0010 And to add ScrollTrigger you can do something like this https://codepen.io/snorkltv/pen/gOZWaQj?editors=1010 Hope this helps. If you want to learn GSAP inside and out, check out my complete GSAP course bundle, it will guide you through all this and so much more.

@Toso has a great idea. I found this interesting so I did this with a clipPath on a group. I'm just animating an orange rectangle's scaleX inside the clipped group. https://codepen.io/snorkltv/pen/gOZmQVZ?editors=1010 If you need help hooking it up to ScrollTrigger and making it work with that curve going down, it's going to be a bit more work, and not something I can do for you, but hopefully you've got some ideas now to get started.

Hi and welcome to the GreenSock forums, Typically it is best to provide a minimal demo showing what you have attempted. This way we can help guide you. However, I had recently shared this demo with my students, perhaps it will help you get started. https://codepen.io/snorkltv/pen/QWJNmQb?editors=0010 If you need help learning ScrollTrigger be sure to check out my comprehensive GSAP training.

Hi and welcome to the GreenSock forums, It seems you found a demo from my ScrollTrigger Express course (38 video lesson) where I teach all the necessary features of ScrollTrigger. This demo is part of a 5-part video series that goes over every line of code. The reason why the images aren't fading is because you have the animation set to be controlled via scrubbing (scrub:true) but your start and end values are identical so there is no distance to scrub. //bad start:"top 50%", end:"top 50%", //better start:"top 50%", end:"top 40%", Here is the modified demo https://codepen.io/snorkltv/pen/XWoMpdb Frankly I'm not a fan of scrubbing through opacity changes like this as the user can stop while the image is only partially faded in and it looks bad. I prefer controlling these animations with toggleActions which force the animation to play through in both directions as the trigger enter and leaves. https://codepen.io/snorkltv/pen/zYyZNBv If you need more help understanding the basics of ScrollTrigger and GSAP check out my complete GSAP course bundle. I think you will find the lessons extremely helpful Good luck on your project! Carl

I don't know. You seem to have a lot of custom logic that hijacks the normal scroll behavior and inputs and I can't really dig into that.

Do you have a fork of your fix working? I'm curious what a comms issue is. check this update. you should be able to see the magenta right border on the last item after resizes https://codepen.io/snorkltv/pen/LYMxvra?editors=0010 Look at the tween() function this.sc = ScrollTrigger.create({ end: () => `+=${this.getScrollAmount() * -1}`, trigger:this.DOM.element, animation:this.tween(), start:this.start, pin:this.DOM.pin, markers:this.markers, scrub:1, invalidateOnRefresh:true, }) tween(){ console.log("new tween returned") return gsap.to(this.DOM.wrapper, { x: this.getScrollAmount(), ease: "none", }); } if you check the console logs while resizes you will see that "new tween returned" only gets called once on initial load... not on resize. On resize we have invalidateOnRefresh set to true. This means that the animation associated with the ScrollTrigger will have its values flushed and reset. It doesn't mean that the function that returned the animation will be called again. When tween() first runs this.getScrollAmount() runs and returns the x value. That x is sort of hard-coded into the tween. The only way that value will change is if it was originally a function-based value, not just a value returned by a function. I found this fix to do the trick tween(){ console.log("new tween returned") return gsap.to(this.DOM.wrapper, { x: ()=> this.getScrollAmount(), //function-based value ()=> ease: "none", }); } An odd side issue however is that somehow the getScrollAmount() is slightly off and I had to subtract an arbitrary number of pixels. return -(racesWidth - window.innerWidth) -20 hope this gets you close enough. Its always fine to ask questions but I'm confident that with the more lessons you do you'll be able to figure out more on your own. This one was a bit tricky for sure.