aok Posted January 12, 2023 Share Posted January 12, 2023 Apologies for the very short question but I can't seem to find an answer anywhere. With ScrollTrigger I am trying to start the trigger 100% from the top of the viewport (so 100vh, technically) but I can't seem to work it out. ScrollTrigger.create({ start: 'top+=100% top', end: 'bottom bottom', onUpdate: (self) => { self.direction === -1 ? headerStore.hide() : headerStore.show() }, markers: true }) I thought the above to run when the top of the trigger hits the top+100% (or even just 100%) but neither seem to work. See the Pen poZPxgX by richardcool (@richardcool) on CodePen Link to comment Share on other sites More sharing options...
Trapti Posted January 12, 2023 Share Posted January 12, 2023 Hi, In order to trigger animation 'scroller-start'(scrollbar's position) should meet 'start'(trigger element's start position). Change the start value to 'start: 'top+=100% bottom' and the animation will run. Link to comment Share on other sites More sharing options...
aok Posted January 12, 2023 Author Share Posted January 12, 2023 5 minutes ago, Trapti said: Hi, In order to trigger animation 'scroller-start' should meet 'start'. Change the start value to 'start: 'top+=100% bottom' and the animation will run. Thanks for the help but I don't think this is right. This would mean when the top+100% of the trigger hits the bottom of the scroller? Is that right? I get so confused by it. I've updated the CodePen but now it never fires. Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted January 12, 2023 Solution Share Posted January 12, 2023 Is this what you are looking for? I've set the window.innerHeight (eg the browsers height) to be the trigger height, so as soon as the browser has scroll once the browsers height the animation will trigger. The start: and end: trigger can be hard to wrap your head around when starting out, but that is why it is smart to turn on the markers to see what it is doing and go from there. Hope it helps and happy tweening! See the Pen JjBNeZe?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
aok Posted January 12, 2023 Author Share Posted January 12, 2023 11 minutes ago, mvaneijgen said: Is this what you are looking for? I've set the window.innerHeight (eg the browsers height) to be the trigger height, so as soon as the browser has scroll once the browsers height the animation will trigger. Thanks so much for this. Yes this is great. I wonder why we can't use % values from top? Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 12, 2023 Share Posted January 12, 2023 You can, but it will get the percent value of the element that is being triggered (in your case the body) and 100% of the body is the whole scrollable area, so it would only trigger when you scroll all the way to the bottom of the page. If you create an element (let say a header) make that 100vh and use that as the trigger it would work with "top+=100%" top or "bottom top", this would translate to "when the bottom of the element hits the top of the browser window..." 2 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