Share Posted November 13, 2014 Just wondering if there is a way to add and play/pause/stop media elements like audio and video to an instance of TimelineLite or TimelineMax and control with the GSAP-JS API? What I was trying to ask was how to sync the media play/pause/reverse with the gsap timeline. Anyone any clues? Link to comment Share on other sites More sharing options...
Share Posted November 13, 2014 Hi Praney Behl You can do that easily with GSAP eventCallbacks and function calls ( delayedCall , onComplete , onRepeat , onReverse , onStart , onUpdate and ... ) Link to comment Share on other sites More sharing options...
Author Share Posted November 13, 2014 Hi Praney Behl i think you can do that easily with GSAP function calls ( delayCall , onComplete , onRepeat , onReverse , onStart , onUpdate and ... ) Thanks Diaco, Would it be possible to get an example? Cheers! Link to comment Share on other sites More sharing options...
Share Posted November 13, 2014 You can do that easily with GSAP eventCallbacks and function calls ( delayedCall , onComplete , onRepeat , onReverse , onStart , onUpdate and ... ) very simple demo pls check this out : See the Pen mydPMO by MAW (@MAW) on CodePen var audioplay = document.createElement('audio'); audioplay.setAttribute('src', '.../music.wav'); TweenMax.to(".blue",5,{x:200, onStart:function(){audioplay.play()}, onComplete:function(){audioplay.pause()} }) 2 Link to comment Share on other sites More sharing options...
Author Share Posted November 13, 2014 Thanks mate, I think I should have been more clear, what I was trying to ask was how to sync the media play/pause/reverse with the gsap timeline. Just updated my initial post. Link to comment Share on other sites More sharing options...
Share Posted November 13, 2014 Yea I'm not sure if we're just not getting it but it still seems like Diaco's answers do exactly what you are asking for. You could also add callbacks at any time to a timeline with .add() or .call(). 1 Link to comment Share on other sites More sharing options...
Share Posted July 10, 2015 Came across this post wondering the same question. This answers only one aspect of the question. It's a useful but very simple example. The example shows that you can pause, stop, start an audio, but is there a way to tie the audio scrub bar to a TimelineLite/Max scrub. So if i where to scrub back in TimelineLite/Max it would adjust the positioning of the audio to match? Logically, if you can .call() the audio and pass a time start can. If I find/discover the answer I'll post here. Link to comment Share on other sites More sharing options...
Share Posted July 10, 2015 Hi stoverpix that's so easy , you can get/set Timelines Progress with .progress() ( return range num between 0 - 1 ) and get/set audio time with audio.currentTime 3 Link to comment Share on other sites More sharing options...
Share Posted December 23, 2015 Hi Diaco I used this with tweenmax draggable, but the video is not playing smoothly. Link to comment Share on other sites More sharing options...
Share Posted March 9, 2016 Hey everyone, new here. Only just found this plugin a few days ago.I thought I'd share the really basic setup that I got up and running last night to see what others think and see if it can be improved.For me the important thing is that events happen at the right time in the music. This setup seems to do the job but I'm wondering if there is a better, more efficient solution. <body> <svg><!-- Copy-pasted svg code --></svg> <audio id="music" controls="controls"> <source src="audio.mp3" type="audio/mp3" /> <source src="audio.ogg" type="audio/ogg" /> </audio> <script> // variable to store HTML5 audio element var music = document.getElementById('music'); // set audio to loop (optional) music.loop = true; // references to svg objects var svgobj1 = document.getElementById("svgobjectID1"); var svgobj2 = document.getElementById("svgobjectID2"); // timeline set up, note that paused is set to true as the playback // will be controlled by the audio to keep in sync var tl1 = new TimelineLite({paused:true}); tl1.to(svgobj1, blah blah..) .to(svgobj1, blah blah..) .to(svgobj1, blah blah etc.); var tl2 = new TimelineLite({paused:true}); tl2.to(svgobj2, blah blah) .to(svgobj2, blah blah) .to(svgobj2, blah blah etc.); // when the music is played, play the animation music.onplay = function(){ tl1.play(); tl2.play(); }; // when the music is paused, pause the animation music.onpause = function(){ tl1.pause(); tl2.pause(); }; // when the progress bar on the audio element is jumped to a different // point manually (or automatically), adjust the timeline to match music.onseeked = function(){ tl1.time(music.currentTime); tl2.time(music.currentTime); } // while the audio is being played, make sure the timelines are in sync // with the audio (it otherwise appears to go out of sync if, for // example, the tab is not in focus) music.ontimeupdate = function(){ tl1.time(music.currentTime); tl2.time(music.currentTime); }; </script> </body> That's it. Really basic. Just matching up audio events with the timelines.Let me know what you all think. Thanks. Link to comment Share on other sites More sharing options...
Share Posted February 11, 2017 RE: @b-xb 's psuedo code, Here is a CodePen with that idea in action for anyone who comes across this like I did. See the Pen VPVoVa by sheriffderek (@sheriffderek) on CodePen 3 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