Jump to content


ScrollTrigger video taking up whole website

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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)

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 



  • Like 2
Link to comment
Share on other sites

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



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.