Pipo

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

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!

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!

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!

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!

Hi Carl, Thanks a lot for your quick answer!! That's the solution I ended up choosing (plus it might have a better performance than animating stroke-dashoffset). I was just wondering if there was a "scientific" way of achieving the effect without guesswork. In the end the scrubber tips was really helpfull!! Thanks a lot!

Hello, I'm actually learning how to use GSAP so the answer might be quite simple! Here is my situation: I want to create a background with 3 dash lines that animate continously. Even lines have a different stroke-dasharray attribute so they look staggered. I want the solution to work even if my container has not a fixed height. The problem with the actual solution is that when my animation repeat I can see a jump to the beginning of the animation. I have tried using the DrawSVG plugin but I'm not sure how to accomplish the effect with it. Now I need your expertise, what would be the best way to achieve this effect? Thanks!