Jump to content


ScrollSmoother + Position Sticky [Attempt]

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

  • Solution

Hi @itsMiles and welcome to the GreenSock forums!


Personally I don't see anything wrong in your code. Sure almost everything can be optimized in some way, but that doesn't mean that it should be. As @mvaneijgen says: "If it works it works".


Happy Tweening!

  • Thanks 1
Link to comment
Share on other sites

Well, thank you @Rodrigo for taking the time of checking the example out, and confirming it is not too bad, coming from a GSAP Superhero, it is a relief!


Will continue my Tweening journey, so far it's been fun and easy to grasp

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