business gsap GSAP not getting the video height!

[Kevin_Canvas]

Hi Support Team,

I have a problem on my page, in a couple of reloads of the page, next element of GSAP (<div class="pin-spacer">) is not calculating the video height above and is being overlapped with the video. I need it always to push the video up and not to be overlapped. 
This is the wrong behaviour:

This is how it should always looks like:

I would really appreciate if anyone will give a feedback asap. Looks like it's a tricky thing that effecting it. The gsap text component below is using "pin: true", if it helps as a hint.
 

Issue is happening only some times and not always

Wish you a great day all!
Best,
Kevin.

[GSAP Helper]

Hi @Kevin_Canvas and welcome to the GSAP Forums!

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Kevin_Canvas]

Hi @GSAP Helper,

See the Pen rNRbWQZ by kevinalku (@kevinalku) on CodePen.

 here you could find the codepen link on those 2 components. Here this is not reproducible. Something is effecting in the script. Maybe using a couple of times "Register Scroll Trigger" or any other side effect. It's only a wrongly height calculation that is positioning text section component on top and not calculating the video height at all.  

[mvaneijgen]

Hi @Kevin_Canvas welcome to the forum and thanks for being a club member! 

 

Are use sure it is a GSAP issue? If it is not reproducible in Codepen it sounds like an issue some where else, have you tried removing the video and just setting an a block that has the height you want it to have to see if the issue still exist then. I have the feeling the video is being loaded a tick too late and then the page jumps to its final height. You could also add an event listener to the video that watches for it to be loaded fully and then call ScrollTrigger.refresh() to have it recalculate all the start and end values. 

 

Hope it helps and happy tweening! 

[Kevin_Canvas]

Hi @mvaneijgen,

 

Thanks for quick feedback! 
I have tried in fact using that refresh on Video DOM loaded function, but I got the same issue. I tried in another way now, adding it into a fake trigger event, wrapping with pin-spacer div and the issue looks like is not reproducible anymore.  Let's see if is no any other issue will be appear, otherwise I will come back with another question here maybe.

Best,
Kevin.