Stop pin image at the center of the next section

[kevchcm]

Hello, I have a question although I don't know if I can't find the answer here but I thought I should give it a try since I exhausted all other options.

 

I have an image/video that needs to be pin and it's going to be move to another section, so what I need it's to be able to un-pin the image once the center of the image/video hits the center of the content of the section. The problem is that the image can be larger or smaller depending of the size of the screen (since it's inside a grid) so I don't know how to calculate this so the centers always meet regardless of the image size.

 

Any help would be appreciated

See the Pen zYKoZEG by godhandkiller (@godhandkiller) on CodePen

[akapowl]

 

Hey @kevchcm

 

You could just set the end of your pin to 'center top+=' the height of your video element devided by 2, and make it function-based, so it responds to resizes.

 

end: () => 'center top+=' + document.querySelector('video').offsetHeight/2

 

Note, that in the demo below, I added a media-query, to showcase that it works.

Also, I set the end trigger to .trusted-partnerships-header, just to have some sort of  visual proof of something centering with the video.

 

See the Pen e4f17e9658cf211e19f8864e7a852c30 by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

 

Cheers,

Paul

 

[kevchcm]

12 minutes ago, akapowl said:

 

Hey @kevchcm

 

You could just set the end of your pin to 'center top+=' the height of your video element devided by 2, and make it function-based, so it responds to resizes.

 

end: () => 'center top+=' + document.querySelector('video').offsetHeight/2

 

Note, that in the demo below, I added a media-query, to showcase that it works.

Also, I set the end trigger to .trusted-partnerships-header, just to have some sort of  visual proof of something centering with the video.

 

 

 

 

 

Hope this helps.

 

Cheers,

Paul

 

Are you kidding me? This is EXACTLY what I needed and it's so simple. I was going insane doing all kind of measurements.

Can't thank you enough!!