Pinning two elements

[pattocheu]

Dear All,

 

I am trying to pin two elements (the title and the right image) using ScrollTrigger and pin. Locally on my computer, I experience a slight jump during scrolling, but this does not appear on CodePen.

 

I don't think we can pin two elements using the same instance of ScrollTrigger, so I have two instances. Is this the right method?

 

Thank you for your help and availability.

See the Pen rNPXWzb by pattocheu (@pattocheu) on CodePen

[GreenSock]

Yeah, I'm not seeing any jump at all. There must be something different in your local project that's causing that issue. 

 

Typically it's better to just create a container element that holds both of the things you want to pin, and just pin that instead of trying to do 2 different pins at the same time. Maybe that isn't possible with your setup though. It very well may be fine to use 2 different pins. If you're having trouble, please provide a minimal demo that clearly illustrates the problem so we can see the jump and poke around to see what might be causing it. 

 

While the things are pinned, do they behave fine? Is it just an initial jump that's the problem? 

[pattocheu]

Thank you @GreenSock

 

My problem is the use of Lenis. In my CodePen, I don't have smooth scrolling. By slightly modifying my CSS, I no longer have slight jumps.

 

Thank you.