ScrollSmoother + Position Sticky [Attempt]

[itsMiles]

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 ツ

 

ScrollTrigger.create({
      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.

[Rodrigo]

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!

[itsMiles]

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 ツ