_josch Posted January 20, 2022 Share Posted January 20, 2022 Hello! For whatever reason, the markers we can enable inside the ScollTrigger object are not working. To be exact, they scroll faster than the website and thereby are out of viewport very soon after scrolling. They don't stay "fixed" in the start and end position, e.g. "top 50%", but move on the y-axis faster than the viewport. Also, the start and end of the trigger are not shown, just the markers on the right hand side. This gif illustrates what's happening: https://gyazo.com/3885ea42b9197cc5c27b7b67fe4638ee Anyone has an idea what the reason could be? Much thanks! _josch Link to comment Share on other sites More sharing options...
akapowl Posted January 20, 2022 Share Posted January 20, 2022 Hey there @_josch That is related to how smooth-scrollbar works. If you take a look at the smooth-scrollbar example in the .scrollerProxy() docs, you'll see, it does have some extra code to handle that at the very end. That should resolve things for you - give it a shot. // Only necessary to correct marker position - not needed in production if (document.querySelector('.gsap-marker-scroller-start')) { const markers = gsap.utils.toArray('[class *= "gsap-marker"]'); bodyScrollBar.addListener(({ offset }) => { gsap.set(markers, { marginTop: -offset.y }) }); } 1 Link to comment Share on other sites More sharing options...
_josch Posted January 20, 2022 Author Share Posted January 20, 2022 Thanks @akapowl for the answer! I looked at the codepen you mentioned and have also tried to paste the code into the javascript file that controls the title animation (picture 1), as well as my index.js (picture 2 at the very bottom). Yet, the outcome on the page is still the same. I've also tried pasting the //setup from the codepen into the top of my code, yet it says "Scrollbar is not defined". Link to comment Share on other sites More sharing options...
Solution akapowl Posted January 20, 2022 Solution Share Posted January 20, 2022 I don't think you should be just pasting over the code from the example I mentioned over to your scenario. If smooth-scrollbar itself worked for you before (alongside ScrollTrigger), keep using it like you had in your scenario but change the variable that your smooth-scrollbar instance is stored to ( scrollbarin your case) when you add the eventListener for the markers. scrollbar.addListener(({ offset }) => { gsap.set(markers, { marginTop: -offset.y }) }); Other than that, I don't think I can help much more from just looking at screenshots. If you could create a minimal demo of your scenario, I'd be glad to take a look at it. 3 Link to comment Share on other sites More sharing options...
_josch Posted January 20, 2022 Author Share Posted January 20, 2022 Changing the name on the const.addListener worked! I didn't realize this was the problem, thank you very much and I wish you a great day! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now