Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kevchcm

Stop pin image at the center of the next section

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

 

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

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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!!

  • Like 2
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.
×