Jump to content
GreenSock

TrulyNewbie

ScrollTrigger refresh

Go to solution Solved by GreenSock,

Recommended Posts

Hi, on my website, I have a slider that changes height, so when it's clicked the footer is cut off. So I made a small demo.

 

When I click the button, the fixed .box in the background scroll triggers reset. So it fades back in.

How can I make it so it when I click the button that triggers the ScrollTrigger refresh,  the .box div isn't affected?

 

I've tried, toggleActions, and invalidateOnRefresh: false

 

Thank you for any help

See the Pen OJQrZbm by NewbieRuby (@NewbieRuby) on CodePen

Link to comment
Share on other sites

  • Solution

I'm struggling to understand why you would use a position: fixed element as a trigger. It doesn't scroll with the page, so what would you expect it to do in terms of triggering? 

 

When you do a ScrollTrigger.refresh(), it of course re-calculates all the start/end positions but in the scenario you described, you've already scrolled down but the position: fixed container doesn't move, of course, so now the start/end would be calculated according to that position. 

 

If you want it to trigger at the very top of the page, just give it a numeric value like start: 0 or start: 1 which is absolute. No need for a trigger at all. 

 

See the Pen PoQXdWp?editors=0110 by GreenSock (@GreenSock) on CodePen

 

And why were you setting the height to something invalid like this?:

container.style.height = ScrollTrigger.refresh()

 

Link to comment
Share on other sites

1 hour ago, GreenSock said:

I'm struggling to understand why you would use a position: fixed element as a trigger. It doesn't scroll with the page, so what would you expect it to do in terms of triggering? 

 

When you do a ScrollTrigger.refresh(), it of course re-calculates all the start/end positions but in the scenario you described, you've already scrolled down but the position: fixed container doesn't move, of course, so now the start/end would be calculated according to that position. 

 

If you want it to trigger at the very top of the page, just give it a numeric value like start: 0 or start: 1 which is absolute. No need for a trigger at all. 

 

 

 

 

And why were you setting the height to something invalid like this?:

container.style.height = ScrollTrigger.refresh()

 

Thank you for your help. I didn't consider that a fixed element could not be a trigger . Thanks

 

And - "And why were you setting the height to something invalid like this?:" That was an accident, I was playing around with ideas and must've accidentally hit save.

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