ScrollTrigger video taking up whole website

[Thepaulcollett]

Hey all

 

I was hoping someone could help me out. I'm using Scroll Trigger to play and reverse a video depending on the users scroll. It works, as you can see from this link (for some reason it doesn't work in Codepen) www.paulcollett.co.uk

as you can see the video is covering up most of the website. I can't for the life of me work out why. I've used a div to contain the section but doesn't seem to be working. Any ideas?

See the Pen RwKVjey by paul-collett (@paul-collett) on CodePen

[GreenSock]

Welcome to the GreenSock community, @Thepaulcollett!

 

We really try to keep these forums focused on GSAP-specific questions - we just don't have the resources to offer free general consulting services especially with troubleshooting live web sites, but maybe try adding a z-index to the other content that's getting covered up so that it's in front? Position: fixed elements and transforms can make browsers stack things in ways that you may not expect

 

We'd be glad to answer any GSAP-related questions, though. 

[Visual-Q]

Check the console...

404 error on the video (Failed to load resource: the server responded with a status of 404 () } and I don't think you have gsap  loaded (Uncaught ReferenceError: gsap is not defined)

[Thepaulcollett]

Hey guys, thanks for the feedback, I'm a total n00b at this, so not really sure what I'm doing. As far as I can tell I have GSAP loaded via the scripts

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.js"></script>
    <script src="test/script.js"></script>

As for the video, I'm lost on that one, it works and plays, on both desktop and mobile and is definitely in the directory. I just can't work out why it's taking up half the site.

[Visual-Q]

I was referring to the codepen. 

 

On your site:

Re the video I'm a little confused what to you want it to be doing, currently it's sitting up at the top overlaying everything because you have position fixed on it. If you want the video to sit in its container try setting the video to:

position: absolute
 

and add to the row that contains it:

position: relative

 

At this point containing row with the absolute child element has no inherited height, if you want to set this and have video overflow hidden give it a height and set it's overflow properties accordingly. such as:

 

height: 50vh;
overflow: hidden;

 

Then I suppose you'll have to adjust how you have the scrollTrigger setup to make it react at the appropriate time. 

 

 

[Thepaulcollett]

Hey Vis

 

Thank you so much! So close! almost working but not playing the video from start, and has made the section above smaller. When I say noob, I really mean supernoob, Im beginning to think that this task may be too complex for me to handle. Do you offer a freelance services? Something quick to get it fixed up I'd really love to have this effect on the site (and another scroll trigger one eventually)

 

Thanks once again

 

Paul