Jump to content
Search Community

Scrolltrigger onEnter fires on reload

clieee test
Moderator Tag

Recommended Posts

Hello,

 

I have the following setup in a React project (next.js).

 

Section 1: A sticky element that contains my scroll trigger for an element (lets call it containerRef) within this section that is top: 0 with position absolute

Section 2: Static position

Section 3: Static position

Footer: Sticky element

 

I've setup so my scrolltrigger fires a console log for onEnter, onLeave etc. from "top bottom" trigger position of containerRef. It works fine on page load when my page is scrolled up at the top, but if I reload the page from a scrolled down position it also fires the "onEnter" callback which will then start some animations on the Section 1, that are not within the viewport... 

 

How should I solve this? I've tried "limitCallbacks: true", but no success. It still fires even if Im scrolled down on the page when reloading.

 

Thank you

Link to comment
Share on other sites

Hi @clieee. Thanks for being a Club GreenSock member! 🙌

 

It's super difficult to troubleshoot blind - can you please provide a minimal demo

 

It sounds like the problem may be that you've got a position: sticky element that you're using as a trigger. I definitely wouldn't do that because it jumps out of the document flow when you scroll down, so when ScrollTrigger checks where it is in the viewport (to calculate the start/end values), it's in a funky position. I'd certainly recommend using a different element (maybe a wrapper) as the trigger instead. 

 

If you still need some help, a minimal demo will significantly increase your chances of getting an answer. 

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.
×
×
  • Create New...