Share Posted June 23, 2020 Hello there, Really enjoying the power behind ScrollTrigger but I have a question, and I'm not sure if it's me doing something wrong here or it's intended to be used like this. Basically, when having an animation that moves the trigger div away from it's initial position, if the "scroller-start" is already triggering the start of the animation on load, then it takes the animation start position as a starting point, and not the original position. I hope I have explained myself correctly, please let me know if you don't understand. Thanks! EDIT: might need to resize the codepen so that the whole window appears on load. See the Pen QWyvpJq by hawkmusician (@hawkmusician) on CodePen 1 Link to comment Share on other sites More sharing options...
Share Posted June 23, 2020 Are you expecting the behavior to be like it does using the latest beta instead? See the Pen dyGWzQb by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 23, 2020 Hi Zach, Thanks for the reply. Problem is, with this setup, it would mean that if the user doesn't scroll pass the trigger (which he can't since it's the top of the page), it would never activate the animation? Link to comment Share on other sites More sharing options...
Share Posted June 23, 2020 Hmm. It's an edge case because of you have reverse as the last parameter. If you change that to none then it will play. I would argue that this is the correct behavior if you have reverse in a later parameter like that and the start and end are not able to be scrolled to. If you want to make sure that it can be played and reverse, make sure the start position is able to be scrolled to. 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 23, 2020 You are correct about that point, but it wasn't really what I was going after. My problem resides in the fact that ScrollTrigger takes the start position once the animation has already started, and not the initial and original of the div. Please check the screenshot, where the red line should be the starting point (and not where it is placed). Am I understanding something wrong here? Link to comment Share on other sites More sharing options...
Share Posted June 23, 2020 Ah, I understand now. Yes indeed it should. On some loads the start and end are where they should be but on most it they're further up like you show in the screen shot. There's some sort of bug we'll need to fix here. Side notes: You can just use numerical values for your y. ease: "ease.out" is an invalid ease. See the ease docs for more info. If you want a duration of 0 use .set() We'll let you know once it's fixed. 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 23, 2020 Thanks for the clarification Zach, and thanks for the little tips, helps a lot! Link to comment Share on other sites More sharing options...
Share Posted August 26, 2020 Hi! I face a similar problem with ScrollTrigger. In a React app some data are fetched asynchronously and the dimensions of their container changes. The problem is that the markers of the pre-existing static elements (2 paragraphs in my case) that are underneath these dynamic elements don't adapt to this change. Is there any fix for this issue? Thanks! Link to comment Share on other sites More sharing options...
Share Posted August 26, 2020 Ok. I just found the answer. Sorry for the annoyance. Inside a useEffect hook, just insert ScrollTrigger.refresh() with input array of states that create the issue useEffect(() => { ScrollTrigger.refresh(); }, [state1, state2, ...]); 3 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