Jump to content
Search Community

Fire ScrollTrigger after 100% from top (not working)

aok test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

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

  • Solution

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

  • Like 1
Link to comment
Share on other sites

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

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

  • Like 2
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...