Jump to content
Search Community

ScrollTrigger Breaks on Resize Using Recommended Locomotive Approach (data-scroll-section)

column5media test
Moderator Tag

Recommended Posts

Hi all,

 

I've forked the ScrollTrigger + Locomotive demo linked from your website. The only changes I've made were to add two extra sections to make it longer, and then add the data-scroll-container and data-scroll-section attributes, as is recommended by Locomotive:

Quote

Note: scroll-sections are optional but recommended to improve performance, particularly in long pages

 

To break ScrollTrigger, you can simply scroll through the demo as usual, and then once at the bottom, just resize your browser. (Please ensure that all other sections are outside the viewport.) When you scroll back up to any of the other sections, their ScrollTriggers will be broken and will not play, as if you're not re-entering their section at all. This behavior is reproducible in all scenarios when employing smooth scroll and data-scroll-section.

 

Calling ScrollTrigger.refresh() from the console will only refresh any ScrollTriggers that are currently within view, rather than refreshing globally as it states it should. I have a hunch that it's related to how Locomotive puts a data-scroll-section-inviewattribute on the relevant section (and makes all others opacity 0 and resets their transform), but that's about as much as I've been able to deduce so far. This has been racking my brain for a couple of days and I would greatly appreciate assistance.

 

Thank you and sincerely,

 

C5

See the Pen WNpmqJE?editors=1000 by JoC5 (@JoC5) on CodePen

Link to comment
Share on other sites

 

Hey @column5media - welcome to the forums.

 

When you search for data-scroll-section in these forums, you'll find quite a few threads about this already.

 

Here is one of the latest with an approach of explanation why ScrollTrigger will unfortunately not work with locomotive-scroll's data-scroll-section attribute.

 

"That is also why locomotive-scroll's data-scroll-section won't work with ScrollTrigger - when you use that data-attribute on individual sections, those individual sections will get translated up and down individually but ScrollTrigger needs some reference for the ScrollPosition of the whole thing - which it gets via .scrollerProxy()."

 

 

 

 

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

On 6/19/2021 at 1:27 AM, akapowl said:

 

Hey @column5media - welcome to the forums.

 

When you search for data-scroll-section in these forums, you'll find quite a few threads about this already.

 

Here is one of the latest with an approach of explanation why ScrollTrigger will unfortunately not work with locomotive-scroll's data-scroll-section attribute.

 

"That is also why locomotive-scroll's data-scroll-section won't work with ScrollTrigger - when you use that data-attribute on individual sections, those individual sections will get translated up and down individually but ScrollTrigger needs some reference for the ScrollPosition of the whole thing - which it gets via .scrollerProxy()."

 

 

 

 

 

 

 

Thank you for the informative reply. It is very unfortunate that these two libraries cannot play nicely together, but I understand the limitation.

 

I believe I'm going to spend some time hacking away at Locomotive to see whether I can resolve the issue by preventing some of its (perhaps unnecessary) transform resets when objects aren't in view. Hopefully the performance impacts aren't decisively negative. I'll report back if I have any success.

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