Syncing a timeline with a video

[friendlygiraffe 11 Likes (Newbie)]

Hi,

 

I'm trying to sync a Timeline with a video, but the only reliable solution seems to be ontimeupdate, which only fires every half second or so

 

Is there decent solution to this?

 

Thanks

See the Pen ONNOgE by friendlygiraffe (@friendlygiraffe) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi friendlygiraffe 

 

you can use TweenLite.ticker to sync tween progress with video currentTime on every tick .

 

something like this :

var vid = document.getElementById("myVideo");
var tween = TweenMax.to( obj , 2 , { ... , ease:Linear.easeNone , paused:true });

function Update(){
  tween.progress( vid.currentTime/vid.duration )
};

vid.onplay = function() {
    TweenLite.ticker.addEventListener('tick',Update);
};
vid.onpause = function() {
    TweenLite.ticker.removeEventListener('tick',Update);
};

 

pls check this out : 

See the Pen JXXOQy by MAW (@MAW) on CodePen

[Jonathan 5,176 Likes (Superhero)]

To add to Mr Diaco's Great advice!

 

You can also check out this forum post which goes over using GSAP to animate the currentTime object of the <video> element:

 

http://greensock.com/forums/topic/12771-animating-the-playhead-of-video-element-is-it-possible/#entry53567

 

As long as you match the duration of the video with the tweens duration, then the tween will animate with the video correctly.

 

[Diaco 1,948 Likes (Superhero)]

this's another simple demo ( Draggable demo ) i think can help : 

See the Pen JXXMaB by MAW (@MAW) on CodePen

[Gibbs 0 Likes (Newbie)]

Hi I love the demo with th green wheel

Is there any way to get the demo running with avi content ?

Thanks

[vinsensei 1 Likes (Newbie)]

On 9/3/2016 at 1:13 PM, Diaco said:

obj

is not defined?

[Sahil 2,541 Likes (Superhero)]

@vinsensei obj will be whatever element/s that you are animating, in his example it is '#circle', check the pen.

[vinsensei 1 Likes (Newbie)]

1 minute ago, Sahil said:

@vinsensei obj sarà qualsiasi elemento / i che stai animando, nel suo esempio è '#circle', controlla la penna.

 

ok thank you, sorry

[Sahil 2,541 Likes (Superhero)]

Quote

ok thank you, sorry

 

You don't have to say sorry, it happens. Feel free to post any questions.