Jump to content
Search Community

Scrolltrigger not working when element deleted above

hugokhua test
Moderator Tag

Recommended Posts

Hey all!

 

In the codepen, there are three divs, and in the bottom div, the red panel animates in to the side when scrolled to. If you click the yellow div, it removes the div above it. My issue is that if I remove that div WITHOUT having already scrolled to the third div, and then I scroll down, it won't animate in. However, if you resize your browser, or do anything to change the width of the pen, the animation starts. Any ideas how to fix this?

 

Thanks!

 

See the Pen pogaKVj by hugo-hua (@hugo-hua) on CodePen

Link to comment
Share on other sites

@hugokhua Hey I like where you going with this for some reason ... lol 

 

Try adding ScrollTrigger.refresh() , worked for my test.

$('.s2').on('click', function() {
  $('.s1').css('display', 'none'),
  ScrollTrigger.refresh() // <--- this will update all scrolltriggers on the page
})

 

  • Like 2
Link to comment
Share on other sites

Yep, @b1Mind is correct. And just to be clear, it's helpful to understand how ScrollTrigger works so that you get the WHY behind this answer...

 

In order to make things super-optimized for performance, ScrollTrigger does all of its expensive operations for measuring where things are on the page (and thus the "start" and "end" positions for the ScrollTriggers) when the page loads, when the screen gets resized, and when returning to a hidden tab. That way, when you actually scroll, all it has to do is compare some simple values. It doesn't need to do expensive operations like getBoundingClientRect() to constantly check "is that element in view yet?", "how about now?", etc. 

 

So if you mess with the DOM and shift things around, ScrollTrigger doesn't know you did that, thus it'll use the original measurements - you've gotta tell it to refresh() which is the expensive operation where it calculates the start/end positions of things. 

 

Does that clear things up? 

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