Jump to content


Video timeline dragging and click

Recommended Posts

Hello everyone,


I am new to GSAP and I am trying to enable dragging and click on custom html5 video timeline with GSAP. I have read a couple of posts (like this one) on the forum but there is something I can't understand...


I've reproduced a simplified example on the following jsfiddle (I hope you don't mind jsfiddle) : https://jsfiddle.net/epigeyre/oLmk6b0d/


So I create my draggable element from an element stored in a variable, bound it to it's container (which is the timeline container), and then add my function onDrag (I guess click will be the same). The timeline progress is shown by a div inside the timeline container that is scaling on an X axis from 0 to 1. I think linking to the current video time is ok but the animation is not (I don't understand why a translate is applied...).


Here is that specific snippet:


Draggable.create( timelineProgress, {
  bounds: timeline, // My timeline container
  onDrag: function() {
    video.currentTime = this.x / this.maxX * video.duration;
    TweenLite.set( timelineProgress, { scaleX: this.x / this.maxX } ) ;
  onClick: function() {


Could you help me understand what's going?

Thanks a lot for your help!

Link to comment
Share on other sites

Hello @Pipo and Welcome to the GreenSock Forum!


You can check out this codepen by Diaco


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


Happy Tweening :)

  • Like 3
Link to comment
Share on other sites

Hello @Jonathan,


Thanks for your answer! As I've mentionned in my post, I've already check Diaco's exemple numerous times and this one of the reason why it's driving me crazy... I think I am not far from the answer but I can't find my error (I never ask questions on forums except if I can't find the answer after several hours of trying).


The only difference is that I use scaleX instead of width in my TweenLite but event if I switch to the width solution my progress still get translated and I don't understand why. Could you help me look into this please?


Thanks a lot!

Link to comment
Share on other sites

Thanks for the jsfiddle demo. Very helpful.


The difference with Diaco's demo is that he has a separate "thumb" element that he uses to control the dragging.

You are turning your progress bar (.timeline__progress) into the Draggable element which is why it moves when you drag.

I suspect you could put a thumb dragger thing like Diaco has into your demo and just give it an opacity of 0 so that users could drag the end of the progress bar back and forth (or so it would appear). 


However, I think a better solution here is to use the trigger property of Draggable so that you can click and drag anywhere in the progress track to control the progress. The trigger allows you to basically click and drag on one thing to drag another. You won't frustrate your users by having them trying to grab a small invisible thing.


I put together a basic demo that shows a div with a class of ".empty" being moved when you drag over the trigger element ".scrubber".

Currently ".empty" is a 1px wide green div so you can see it move when drag over the scrubber. You can make it invisible if you want.

Whenever you click or drag on the scrubber, empty will move. In addition there is a ".progress" element with a white background that scales along the x axis to match the horizontal position of empty. 


Take this demo for a spin and see if it works for you. You should be able to tie it into the video to control the time.


See the Pen eRBdzM by GreenSock (@GreenSock) on CodePen


  • Like 4
Link to comment
Share on other sites

Wooow!! Thanks a lot, now I understand how it works. I'll try to implement the trigger solution tomorrow and let you know how it goes.

Thanks a lot!

  • Like 1
Link to comment
Share on other sites

Happy to help.

Link to comment
Share on other sites

So here I am back just to tell you a big thank you! I didn't know about the trigger property but now everything works great!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Back to the topic to post my solution if it can help anyone... Thanks again @Carl for your help!



See the Pen BZYLmp by StudioEP (@StudioEP) on CodePen


  • Like 1
Link to comment
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.