Syncing a timeline with a video

[friendlygiraffe]

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]

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]

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]

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

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

[Gibbs]

Hi I love the demo with th green wheel

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

Thanks

[vinsensei]

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

obj

is not defined?

[Sahil]

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

[vinsensei]

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]

Quote

ok thank you, sorry

 

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