limbo Posted August 19, 2021 Share Posted August 19, 2021 Hello. Anyone know if it's possible to control a video within a GSAP timeline, so that other non video elements (in this case text) can be queued up alongside the right point in the video clip. I've had a good look about for examples similar bits but can't find a concrete anwser. Thanks Link to comment Share on other sites More sharing options...
Cassie Posted August 19, 2021 Share Posted August 19, 2021 Hey Limbo - This video thread should help. It is using old gsap 2 syntax though - so you'll be looking for gsap.ticker() instead of TweenLite.ticker We have a migration guide here too which may be of use! 1 Link to comment Share on other sites More sharing options...
limbo Posted August 19, 2021 Author Share Posted August 19, 2021 Thanks Cassie I've taken a look through and it definitely looks like the way to go - but I'm having problems translating it to GSAP3... I'm sure I'm missing something very basic... any ideas? See the Pen eYWqJgw by liamcrean (@liamcrean) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 19, 2021 Share Posted August 19, 2021 Looks like you hadn't swopped out the 'video' variable name everywhere - all sorted now? 3 Link to comment Share on other sites More sharing options...
nico fonseca Posted August 19, 2021 Share Posted August 19, 2021 Hey @limbo I updated your Codepen with minors changes. 🤘 - The duration value is now on the properties - I changed the ease property to 'none' - You have a typo: vid.currentTime should be video.currentTime See the Pen a166af09295c0c5b458d00d56d5eba83 by nicofonseca (@nicofonseca) on CodePen 5 Link to comment Share on other sites More sharing options...
limbo Posted August 19, 2021 Author Share Posted August 19, 2021 Doh! Thanks I've updated my pen. Also needed to set it to pause it in the HTML, and then play() in JS - all nicely synced up 2 Link to comment Share on other sites More sharing options...
mikel Posted August 19, 2021 Share Posted August 19, 2021 Hey @limbo, A simple variant: Determine the times with a normal video player. Then position the subs on a timeline as needed. See the Pen 93980b39d5a9b94408ad1d3499668af5?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 1 Link to comment Share on other sites More sharing options...
limbo Posted August 19, 2021 Author Share Posted August 19, 2021 Thanks Mikel, that's useful. Also - for anyone that might find this useful too — got the same functions working with Vimeo API See the Pen Exmqyye by liamcrean (@liamcrean) on CodePen 4 Link to comment Share on other sites More sharing options...
GreenSock Posted August 19, 2021 Share Posted August 19, 2021 Nice job, @limbo. Thanks for sharing the solution. 🙌 Link to comment Share on other sites More sharing options...
limbo Posted August 23, 2021 Author Share Posted August 23, 2021 Last one. As there were some holes I needed to fill - namely adding full timeline with some basic text effects + play/pause/mute/reset/skip + background video Prototype: See the Pen oNWKdyB by liamcrean (@liamcrean) on CodePen (a fair bit of repetition in the controls JS – need it to be super clear for ref). 1 1 Link to comment Share on other sites More sharing options...
limbo Posted January 2, 2022 Author Share Posted January 2, 2022 And similar one in HTML5 (instead of Vimeo - which can be a real pain when loading assets in via AJAX t then controlling timing/playhead etc) See the Pen yLzXQvR by liamcrean (@liamcrean) on CodePen 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