Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
_josch

ScrollTrigger markers not working

Go to solution Solved by akapowl,

Recommended Posts

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

markers.PNG

Link to comment
Share on other sites

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 })
  });
}

 

  • Like 1
Link to comment
Share on other sites

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". 

markers2.PNG

indexmarkers.PNG

Link to comment
Share on other sites

  • Solution

 

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.

  • Like 3
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×