2 col pinned end position

[IndM]

I have this demo where in one column there is a scrubbing video and on the other some large text.
I'm struggling to set the end position of the video animation perfect to the height of the column. So the behavior would act as a sticky element.

Right now I calculate the height of the column minus the video height.

See the Pen BaGZGEL by indy-meermans (@indy-meermans) on CodePen

[mvaneijgen]

There is an issue with your video.offsetHeight. It seems like you video is loading and is a particular height an then it is loading and is some other height, you have to wait for the video to be done loading before you get it's height.  Or wrap the video in a div which you style (you could look in to css aspect-ratio https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) and get the height of that element, that is probably loaded faster then the video. 

 

But back to the ScrollTrigger. I've changed the endTrigger to be the .right panel minus the height of the video (given it a fixed height with CSS) and then also set the viewport end trigger to the center the same as your start trigger, so now when we're done scrolling it lines up with the bottom of the blue panel.

 

 

See the Pen KKrqbWR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[IndM]

11 minutes ago, mvaneijgen said:

There is an issue with your video.offsetHeight. It seems like you video is loading and is a particular height an then it is loading and is some other height, you have to wait for the video to be done loading before you get it's height.  Or wrap the video in a div which you style (you could look in to css aspect-ratio https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) and get the height of that element, that is probably loaded faster then the video. 

 

But back to the ScrollTrigger. I've changed the endTrigger to be the .right panel minus the height of the video (given it a fixed height with CSS) and then also set the viewport end trigger to the center the same as your start trigger, so now when we're done scrolling it lines up with the bottom of the blue panel.

 

 

 

Thanks!! @mvaneijgen
I will keep that in mind for the video. Is it also a possible to check when the full content is loaded of the page, to call the scrolltrigger.update()? Or is this a sloppy way to fix it.

The scrollTrigger solution is much easier then calculating the difference! I didn't know you could set the end of the trigger based on an other div.

[Rodrigo]

Hi,

 

There are two approaches in these cases. If you have other elements such as images and fonts that could also create a layout shift that will mess with the calculations ScrollTrigger makes, then it would be better to use the window load event:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

 

If you just need to know when the video data is ready and it can be correctly rendered based on the natural dimensions and the styles you're giving to it, then the loaded metadata event is what you're looking for:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event

 

In both cases is better to create your ScrollTrigger instances after any of those events are fired:

// Video is loaded
video.addEventListener("loadedmetadata", () => {
  // Create your ScrollTrigger instances now
});

// Everything is loaded
window.addEventListener("load", () => {
  // Create your ScrollTrigger instances now
});

Of course you can create your ScrollTrigger instances before any of these events are fired, but then when those events fire you'll have to call ScrollTrigger.refresh() which might seem redundant and a waste of resources IMHO. Better wait for everything to be loaded and ready.

 

Happy Tweening!