Jump to content
Search Community

ScrollSmoother + Position Sticky [Attempt]

itsMiles test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hey guys, I'm pretty new to GSAP as a whole, so I apologise if I'm missing something obvious! I've been reading the forums and documentation over the past weeks and some of the solutions worked great for some of the issues I found myself into, so thanks for that!


I'm trying to achieve the normal behaviour of a position: sticky; element, while enjoying the awesome ScrollSmoother Plugin. I somewhat achieved what I was going after, but the way I did it feels kinda wrong, so I'm guessing if there is a better way to achieve the same result.


Please, take a look at the start and end values, pinSpacing doesn't seem to make a difference in this example.


Thanks in advance


      markers: true,

      trigger: stickyTrack[i],
      pin: stickyEl[i],

      start: () => `-=${gsap.getProperty(":root", "--siteHeader-height")}`,
      end: () => `+=${stickyTrack[i].offsetHeight - stickyEl[i].offsetHeight}`,

      pinSpacing: false

See the Pen wvEVmOr by Blvcked (@Blvcked) on CodePen

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