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, {
type:'x',
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() {
console.log('click');
}
});
Could you help me understand what's going?
Thanks a lot for your help!