[Video timeline dragging and click]

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

 

[Video timeline dragging and click]

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!

[Video timeline dragging and click]

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!

[Video timeline dragging and click]

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!

[Video timeline dragging and click]

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!

[Continous dashline animation]

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!

[Continous dashline animation]

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!

See the Pen wGVyvd by anon (@anon) on CodePen