Thepaulcollett Posted April 8, 2021 Share Posted April 8, 2021 Hey all, I was wondering if you could point me in the right direction. I have nearly got my ScrollTrigger to work (more through luck than knowledge) but it's not quite right. The video on scroll seems to play too early, so by the time the user get there, it's nearly finished. Add to that the page still keeps scrolling while the video plays. Unlike your demo where the page stops scrolling. And then the video disappears until you scroll up. Oddly the video works as it should when you scroll up. I've just about reached my limit of knowledge and was hoping someone could guide me in the right direction so I can fix it up Here's the code I'm using. Although I don't even think I've done this right Many thanks See the Pen ExZwBYp by Casso77 (@Casso77) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted April 8, 2021 Share Posted April 8, 2021 I'm not seeing any video in your demo. I think you posted links to a live site in an earlier thread, but that's difficult to debug. Do you think you could set up a demo with just the video and maybe a couple spacer divs? That way we can better assist you with the ScrollTrigger issues. Just FYI - you have a lot of head elements, body tag, scripts etc. in the HTML panel on CodePen. Those aren't necessary. All the scripts can go in the JS panel. I think we can help if you simplify everything down to just the video in question. Thanks and happy tweening. 3 Link to comment Share on other sites More sharing options...
Thepaulcollett Posted April 9, 2021 Author Share Posted April 9, 2021 Hey Craig Thanks so much for getting back to me. I have to hold my hands up, I'm totally lost, the JS code was put in by someone from People per Hour and dare not touch it. I can't for the life of me figure out why the video isn't in the codepen the link works fine: http://www.paulcollett.co.uk//images/homepage/bond-motion.mp4 I've tried to simplify the codepen as you recommended so It just has the video code. I'm sure I'm missing something really obvious but can't for the life of me figure out what. Here is the live site. I've actually managed to put in the 'before and after' code which works perfectly. http://paulcollett.co.uk/index9.html I would really appreciate any help as my mind is officially blown Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 Hi Paul - The video link in your pen is looking for a local file which doesn't exist src="/images/homepage/bond-motion.mp4" You'll need to swop it out for this url http://www.paulcollett.co.uk//images/homepage/bond-motion.mp4 There's also a lot going on in this pen - As Craig said - If you can simplify it down to just the video element and the animation code, we can help you. 2 Link to comment Share on other sites More sharing options...
Thepaulcollett Posted April 9, 2021 Author Share Posted April 9, 2021 Hey Cassie Thanks for the reply. I've put the correct link path in, and linked all the style sheets and java scripts as they should and it still isn't working on Codepen. Sorry all for being so clueless. As far as my knowledge allows, the below pen is just the video section. 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 9, 2021 Share Posted April 9, 2021 Hi, In the codepen you provided the url for the video points to a relative path: <video src="/images/homepage/bond-motion.mp4"></video> That's why there's nothing there. You have to upload your video to codepen. Go to the bottom left corner and click in the Assets button, upload the video and then get the URL for it and use that in the src attribute of your video tag. Also I took a look at the live site and I have a question: Do you have any chance of making that video an SVG? That is actually screaming SVG all over the place, for me at least. Honestly I haven't worked a lot with videos, but I'm not sure how smooth you can get a video progression by updating it's current position programmatically, that's why I'm thinking SVG. Perhaps @Cassie and @PointC have more experience with video and could point you in the right direction. Happy Tweening!!! 4 Link to comment Share on other sites More sharing options...
PointC Posted April 9, 2021 Share Posted April 9, 2021 Yeah - after seeing that video, I'd 2nd @Rodrigo's advice. That would be an easy SVG animation and controlling it with ScrollTrigger would be simple. Plus you wouldn't be dealing with any scaling issues. Any chance of switching to that instead of a video? 4 Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 It does look like it would be a very good case for SVG! I won't sugar coat it though - this certainly won't simplify things from a code perspective, and I feel that there may be quite a few fundamental building blocks missing. I just want to re-iterate what @akapowl said on another post Quote Maybe take things a little bit slower on this - read up on how to properly load files on a website and how to properly work with your HTML ( and CSS ) before you dive into the deep waters of scroll-based animations. You will be needing a solid base for these sort of things or you might become easily overwhelmed. Paul, if this issue needs to be fixed urgently - is there any chance you could take this to the developer who wrote the JS in the first place? If you'd like to wrap your head around building stuff on the web, we're here and more than happy to help with any GSAP questions! But it might be a good idea to start off with a fresh slate rather than code someone else has written. 4 Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 That being said - If you have the time to play around, a good place to start could be SVG-ifying and animating this graphic. I got going with JavaScript by playing around with Greensock and SVG. ✨ 4 Link to comment Share on other sites More sharing options...
PointC Posted April 9, 2021 Share Posted April 9, 2021 4 minutes ago, Cassie said: I got going with JavaScript by playing around with Greensock and SVG. ✨ Same. 3 Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 It's the best way - you're in good company @Thepaulcollett 🙂 ✨ 3 Link to comment Share on other sites More sharing options...
Thepaulcollett Posted April 9, 2021 Author Share Posted April 9, 2021 Hey all Thanks for all the feedback. Truth be told, coding was just something I was doing in the background. Picking up bits here and there. This whole Jave thing is all new and all confusing. The job is a bit of a rush, Just been made redundant and need my portfolio/website up and running to send out etc etc. I've gone back to the dev, but I think they are struggling, it was someone from people per hour after all and they are not always the best suited. I'll look at SVG and see what I can do. Actually, This was the first attempt: http://www.paulcollett.co.uk/index8.html This used two SVG graphics. Don't ask me how I done it though. I've cut and paste more code than I care to admit haha 1 Link to comment Share on other sites More sharing options...
PointC Posted April 9, 2021 Share Posted April 9, 2021 I like it better with the SVG. 👍 26 minutes ago, Thepaulcollett said: coding was just something I was doing in the background. Picking up bits here and there. This whole JavaScript thing is all new and all confusing. You'll get there. Just keep at it. The great Bill Murray said it best in the 1991 classic What About Bob? 3 Link to comment Share on other sites More sharing options...
Thepaulcollett Posted April 9, 2021 Author Share Posted April 9, 2021 ha ha great film to. However, time is of the essence. I would be willing to pay one you fine knowledgeable people for your services if that's an option? Needs must and all that Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 We have a jobs forum Paul. That'll be the place to go. Here's the posting guidelines 🙂 Good luck finding someone to help! 2 Link to comment Share on other sites More sharing options...
Thepaulcollett Posted April 9, 2021 Author Share Posted April 9, 2021 Excellent, I'll look into that. In the meantime I've managed to find the 'vanilla' code I was using. Perhaps this could help with the clean pen I need? See the Pen 9e810322d70c306de2d18237d0cb2d78 by shshaw (@shshaw) on CodePen Link to comment Share on other sites More sharing options...
Thepaulcollett Posted April 9, 2021 Author Share Posted April 9, 2021 Hey guys Me again. So in my haste, I have just figured out that the code I'm trying to get you guys to use isn't actually GASP (face palm moment for sure) I've taken the GASP code from the before and after demo and works perfectly. Alas there is not demo for video scrubbing. Is that possible using GASP? Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 Hi Paul. Not quite sure what you mean I'm afraid - the codepen that you just linked to is using GSAP (scrolltrigger) to scrub through the video. Link to comment Share on other sites More sharing options...
Thepaulcollett Posted April 10, 2021 Author Share Posted April 10, 2021 Oh Jeez. Things are worse than I thought then 😫 So, late last night, I started over, using that code above and got so close. But now I have a black square covering my other ScrollTrigger event (the one that works) and I guess I'll also need to adjust the positioning to make it react at the appropriate time. It's a little off. But so close. I've checked the documentation and it mentions GASP covering whole timelines. Does tat mean this particular page is known as a timeline? As always, any help greatly appreciated Link to comment Share on other sites More sharing options...
Cassie Posted April 10, 2021 Share Posted April 10, 2021 Hey Paul! A timeline refers to an animation timeline, this is a sequence of smaller animations (tweens) linked together so that they can be controlled and manipulated as a whole. https://greensock.com/docs/v3/GSAP/Timeline The issue here doesn't seem to be GSAP or ScrollTrigger specific though. Web development can be a tricky thing to debug as issues occur at the intersection of a lot of different technologies. In this case we have HTML, CSS, JavaScript, external JavaScript libraries like GreenSock and Scrolltrigger, SVG, video assets, and file management. There's a lot here that you're attempting to understand within a very short time frame, and it's not clear specifically what you're struggling with. There are a lot of mental models to build up for the web and as @akapowl said - starting with complicated scroll animations is definitely jumping in at the deep end. We can help you with GreenSock specific questions but unfortunately we don't have the resources available to help you fill in all the other gaps necessary here. Have you had any luck in the jobs forum? Can I help you with that? 3 Link to comment Share on other sites More sharing options...
Thepaulcollett Posted April 10, 2021 Author Share Posted April 10, 2021 I've not looked into the jobs forum as yet and appreciate that what I am asking is above and beyond what a forum can offer. I was hoping that the solution would be something fairly simple like a wrong line of code or something similar. Perhaps I was a little naive with that thought. I'll have a go on the jobs forum. Hopefully someone can help me out. Thanks for all your help 1 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