Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Scrolltrigger with pin + Locomotive Scroll with data-scroll-section

Recommended Posts

Hello, first of all congratulations on the great work with this library.


When using GSAP + Locomotive Scroll, if I assign the data-scroll-section attribute in the sections to improve performance (as locomotive suggests) then, if we have a Scrolltrigger animation using .pin, it breaks.

I imagine because it modifies the DOM by adding a parent above said section.

What can we do to solve this problem?


Here I leave a codepen with a demonstration of what I say:


Thank you!

See the Pen wvqGBMM by animaticss (@animaticss) on CodePen

Link to comment
Share on other sites


Hello @AnimatiCSS


Unfortunately, ScrollTrigger's pinning will not work with sections that have locomotive-scroll's data-scroll-section attribute, as when using that data-attribute, locomotive-scroll will work its translates for the smooth-scrolling on those sections and thus will inevitably tell those sections to keep on moving/translating, so there will be conflicting behaviour between locomotive-scroll and ScrollTrigger, that ScrollTrigger can not do much about.

  • Like 4
Link to comment
Share on other sites

Hi, thanks for your response. I imagined that it could not be done, but I wanted you to confirm it, in case there was some kind of hack that I did not know.




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.