ScrollTrigger: Sticky effect

[iamjonas]

Hey!

I would like to create a classic sticky effect using ScrollTrigger. An element should be pinned next to another element. Unfortunately, the size doesn't seem to be determined correctly. This is probably because "bottom bottom" is used as the end position, right?

See the Pen bGKrKRw by jonasloerken (@jonasloerken) on CodePen

[Rodrigo]

Hi @iamjonas and welcome to the GreenSock forums!

 

Indeed the issue relies on the end position for the ScrollTrigger instance, but mainly because you are using an element that, because of the CSS, uses the entire height of it's parent element. Is better to use just the height of the image plus the top and bottom padding.

 

Here is a live example:

See the Pen zYadMaY by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps you getting started. Let us know if you have more questions.

 

Happy Tweening!