Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
friendlygiraffe

Syncing a timeline with a video

Go to solution Solved by Diaco,

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

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.

 

:)

  • Like 3
Link to post
Share on other sites

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

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

  • Like 4
Link to post
Share on other sites
  • 11 months later...

Hi I love the demo with th green wheel

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

Thanks

Link to post
Share on other sites
  • 11 months later...

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

  • Like 1
Link to post
Share on other sites
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 :)

  • Like 1
Link to post
Share on other sites
Quote

ok thank you, sorry :)

 

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

  • Like 2
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×