Using Draggable with TweenLite

[debra.v]

I've been working on an AV timeline scrubber.  For the most part, it's working, except after a target element is dragged, then the animation stops and will not resume.   It does call the seek appropriately with the correct value in seconds.  

 

If I kill the animation and restart it each time after a drag event, the coordinates of the scrubber knob get messed up and I cannot tell where the darn thing is at or where it should be. Plus it seems to make more sense that an animation not have to be recreated every time.

 

What am I missing here?

 

D

    var knob_offset = 4;
    
    Draggable.create("#pb-scrubber-knob", 
                          { bounds: $("#pb-scrubber-bounds"),
                            type: "x",
                            edgeResistance: 1,
                            onDragStart: function() {
                              var knob = Draggable.get("#pb-scrubber-knob");
                              knob.update();
                            },
                            onDrag: function() {
                              $("#pb-scrubber-fill").width(
                                   $("#pb-scrubber-knob").position().left + 
                                   knob_offset
                                 );
                              $("#pb-elapsed-time").text(
                                      window.odeshell.formatTrackTime(
                                      window.odeshell.getTrackPosition())); 
                            },
                            onDragEnd: function() {
                              $("#pb-elapsed-time").text(
                                      window.odeshell.formatTrackTime(
                                      window.odeshell.getTrackPosition())
                              ); 
                              window.odeshell.seekScrub();
                            }, 
                            onUpdate: function() {
                              $("#pb-scrubber-fill").width(
                                   $("#pb-scrubber-knob").position().left + 
                                   knob_offset
                                 );
                            },
                          });
                  
  window.odeshell.startScrub = function() {

     var dur = window.odeshell.getScreenDuration();
     var animate_to = $("#pb-scrubber-bounds").width()-knob_offset;

     $("#pb-elapsed-time").text(window.odeshell.formatTrackTime(0));

     if ( window.odeshell.tlScrubberKnob !== undefined ) {
       window.odeshell.restartScrub();
     }
     else {
       window.odeshell.tlScrubberKnob = new TweenLite(
                   "#pb-scrubber-knob", 
                   (dur/1000), 
                   { left:animate_to,
                     immediateRender: true,
                     ease:Linear.easeNone,
                     onUpdate: function() {
                         var sndpos = window.odeshell.getTrackPosition();
                         var dur = window.odeshell.getScreenDuration();
                         var kpos = $("#pb-scrubber-knob").position().left;
                         var bounds = $('#pb-scrubber-bounds').width()-
                                 ($("#pb-scrubber-knob").width() + 8);
                         $("#pb-elapsed-time").text(
                             window.odeshell.formatTrackTime(sndpos)); 
                         $("#pb-scrubber-fill").width(kpos);

                         if ( window.odeshell.playComplete() &&
                              (kpos >= bounds) ) {
                           window.odeshell.stopScrub();
                         }
                       }
                   });
     }

  };
   
  window.odeshell.restartScrub = function() {
     if ( window.odeshell.tlScrubberKnob !== undefined ) {
       window.odeshell.tlScrubberKnob.restart(false, false);
     }
  };

  window.odeshell.seekScrub = function() {
    if ( window.odeshell.tlScrubberKnob === undefined ) { return; }
    var kpos = $('#pb-scrubber-knob').position().left; 

     var dur = window.odeshell.getScreenDuration();
     var animate_to = $("#pb-scrubber-bounds").width()-knob_offset;

     var prct = kpos/animate_to;
     var sndpos = dur * prct;
     if ( sndpos < 0) { sndpos = 0; }
     if ( sndpos >= dur) { sndpos = dur; }
     var seekpos = Math.round(sndpos/1000);

     $("#pb-elapsed-time").text(window.odeshell.formatTrackTime(sndpos));
     window.odeshell.setTrackPosition(sndpos);
     window.odeshell.tlScrubberKnob.seek(seekpos);
     if ( !window.odeshell.tlScrubberKnob.paused() ) {
        window.odeshell.tlScrubberKnob.play(seekpos);
     }
  };
   
  window.odeshell.resumeScrub = function() {
    if ( window.odeshell.tlScrubberKnob !== undefined ) {
      window.odeshell.tlScrubberKnob.resume();
    }
  };
   
  window.odeshell.pauseScrub = function() {
    if ( window.odeshell.tlScrubberKnob !== undefined ) {
      window.odeshell.tlScrubberKnob.pause();
    }
  };

  window.odeshell.stopScrub = function() {
    if ( window.odeshell.tlScrubberKnob !== undefined ) {
      window.odeshell.tlScrubberKnob.pause();
    }
  };

[GreenSock]

Two questions:

1. Would you please try the preview I posted here: http://forums.greensock.com/topic/8317-draggable-edgeressistance-and-out-of-bounds/#entry32240 and let us know if that resolves anything for you?
2. If not, would you create a very simple example codepen or jsfiddle? It's much more intuitive than trying to look at a subset of the code in isolation. 

By the way, in your Draggable, I think you meant to define "onThrowUpdate" instead of "onUpdate". 

 

Also, a tip: inside any of the Draggable callbacks, "this" refers to the Draggable instance itself, so you can speed things up by using that instead of doing a Draggable.get(...) every time. 

[debra.v]

Thank you for the speedy response.  Here's where I'm at:

1. I did try the preview, but had the same results
2. I created a jsfiddle:  http://jsfiddle.net/debrav/txApX/44/
   It shows what's happening.  If draggable item is involved in an animation and a drag event occurs, it will not resume.
3. Switched to onThrowUpdate, but onUpdate works too.
4. Thanks for the tip!  Now referring to this in the Draggable onDragStart

[Rodrigo]

Hi,

 

There are a couple of things regarding your sample that got my attention.

 

First, in your fiddle on the dragEnd callback you added the following line:

tlScrubberKnob.resume(trackTime, false);

If you check the value of trackTime is always over 1000, that means you're telling the engine: "resume the timeline at this position", that could be even 30000 seconds!!, and the timelinein question doesn't lasts more than eight hours is a problem, because the engine does goes to that position but the timeline is very much over at that point. You have to divide that value by 1000 in order to match the duration of the timeline, like this:

tlScrubberKnob.resume(trackTime / 1000, false);

Also as a recommendation try to use the same property for the tween and draggable, so if you're animating the left position in the tween the draggable type should be left, it'll be easier to track properties in case you need to.

 

Second, and this one goes to Carl and/or Jack, when you do that the tween does update but the element doesn't animate any more, perhaps overwrite manager comes into play?. The workaround I found is to kill the tween and create it again, for that you have to create the tween as a global scope variable and a function that creates the tween.

 

I've created a simple codepen so you can see it working;

 

See the Pen npBoF by rhernando (@rhernando) on CodePen

 

Best,

Rodrigo.

[debra.v]

rhernando --

 

I did find that issue with trackTime yesterday while I was playing around in the code on jsfiddle.  I hoped I had updated it in time, but you were much faster.

 

Thank you! I would love to see this corrected, but in the meantime your workaround methodology will get us moving forward again.

Much appreciated!

 

Debra

[GreenSock]

Please check out the preview release at http://forums.greensock.com/topic/8339-draggable-on-windows-8-touch/#entry32419 - there's a lot of work that's been done under the hood and I'd love to hear if it works well for you.