Tylor

Thanks for the help @Rodrigo. I was aware that the pinning was the problem which is why I mentioned it but I wasn't sure how to fix it. Triggering the ColorChange function last and then updating the end position from `+=${element.scrollWidth - window.innerWidth + window.innerHeight} ${triggerTop}` - to - `bottom+=${element.scrollWidth - window.innerWidth} ${triggerTop}` seemed to do the trick and now everything triggers exactly where it should.

I'm building a site that has a page color changing function that is triggered by ScrollTrigger. It all works great until I throw a pinned section before it and all the subsequent sections only account for the actual DOM heights. Can someone point me in the right direction on the best approach to handle this type of thing? Here is a minimum viable demo of the two ScrollTriggers in action. https://codepen.io/tylorreimer/pen/OJGaRVz

Great, looks like that worked! Do you mind explaining what exactly bumping the playhead on onReverseComplete() accomplished just so I can understand it? I'm assuming it will still continue looping even after it's looped through the 10 iterations it was bumped correct?

@OSUblake and @GreenSock thanks for the direction so far. I've got a MVP working of a ticker that speeds up with scroll velocity and then slows back down to the base play speed with a tween. Probably not the most eloquent solution but it's getting closer in terms of functionality. If you spot anything you can suggest to make it more performant I'd love to learn! Much appreciated as always. https://codepen.io/tylorreimer/pen/jOaxbJw How do I accomplish looping when the timeScale() goes in reverse? It currently just stops when it gets back to the beginning. Feeling pretty good otherwise.

@GreenSock I'm just looking into timeScale() and it looks promising. I wasn't necessarily looking to have someone write the code just point me in the right direction so thank you. Basic functionality was just a ticker that gets a temporary speed boost when you scroll faster and then slows down. It looks like https://codepen.io/GreenSock/pen/GRvBEdR might have most of the functionality I need. I saw that ScrollTrigger has a velocity property I'd just need to figure out how to tween that down to 1 after you stop scrolling.

So I'm continuing on with this project and wondering if there's any way to add some easing / scroll velocity into the animation mix. https://xmas.mill3.studio/ - about 1/3 down the page is a ticker I saw this example that was super interesting and it looks like it may be using locomotive and possibly a library called PixiJS but I'm sure you could do something similar with GSAP. I've built tickers in the past with CSS animations but not sure how use JS to power a ticker and tap into velocity to change the speed of the animation and have it ease down to the base speed. Perhaps @GreenSock or @OSUblake either of you can point me in the right direction? Would I need to use a scroll jacking library like locomotive to accomplish this effect?

I think I managed to piece together a solution that's working nicely with @GreenSock and @OSUblake examples. Thanks for the help! I can see myself using GSAP on a lot of projects moving forward.

@GreenSock and @OSUblake thanks for the tips. I've been mostly piecing together the logic from other demos with similar functionality until I get a more full grasp of how GSAP works but it sounds like a timeline might not be helpful in this case. I think there was one extra puzzle piece that I didn't include in my original pen but have updated now based on some of the feedback. I have a fixed header—on my full site it slides up after scrolling a bit so you can ignore the fact that it is over top of the content lower on the page—that is part of the reason I wanted to prevent the #site-video section from scrolling up and overlapping the header until it filled the full width of the page. When I use the pin approach on #main it overwrites my padding that kept #main from overlapping with the .site-header initially. Perhaps there is a way to pin yet keep that space at the top and that solves all the issues? https://codepen.io/tylorreimer/pen/YzreVgr

Hello all, I'm pretty fresh to GSAP but have seen it cropping up more and more on sites that I've been inspired by. It seems super robust and I'm keen to learn but have been running into a snag in my project. Currently I have two animations on the page but will likely be adding some more as I flesh it out. The problem I'm running into is my first animation uses translateY and padding to visually keep the element at the same Y position / pinning it on the page until it reaches a padding of 0. I tried adding a marginBottom to this element as well to avoid the spacing problems caused below the element when the translateY is applied. It all works great except for the fact that now the start and end position of the second element (lower on the page) is starting at the wrong place. I am basically wanting to start horizontally scrolling the list of services once that element's bottom hits the bottom of the viewport. It's possible I'm doing a lot of things wrong but maybe someone can point me in the right direction! Cheers, Tylor