kevchcm Posted December 11, 2020 Share Posted December 11, 2020 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 More sharing options...
Solution akapowl Posted December 11, 2020 Solution Share Posted December 11, 2020 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 2 1 Link to comment Share on other sites More sharing options...
kevchcm Posted December 11, 2020 Author Share Posted December 11, 2020 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!! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now