Draggable: Proper way to tween a div that is being dragged

[tauab]

Hey guys,

 

Was wondering how to best approach tweening a div that has a Draggable function associated with it, so that it does not mess up any of the values that is being calculated for dragging/scrolling etc.

 

Let's say I wanted to anchor to a particular section automatically by using tweenmax but also wanted to preserve the Draggable features like grabbing and scrolling.

 

More specifically, how would I tween the div with class"box" in the code pen?

 

Any help would be greatly appreciated.

 

Thanks! 

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

[Carl]

H,

 

Thanks for the CodePen demo. Little stuff like that saves us lots of time.

 

I think the big trick is just making sure the Draggable interactions properly kill whatever scrolling might be currently running.

I added a little button that scrolls to 400px slowly. 

 

//cache #demo so that we only find it once
var $demo = $("#demo")


Draggable.create($demo, {
  type:"scrollTop",
  bounds:$demo,
  edgeResistance:0.65,
  //kill scroll tweens on press 
  onPress:function (){
    TweenMax.killTweensOf($demo)
  },
  throwProps:true
}
)


$("#scroll").click(function() {
  TweenMax.to($demo, 4, {scrollTo:400})
})

http://codepen.io/GreenSock/pen/gAJdn

 

Notice you can drag while the button-initiated scroll is running and click the button while a throw-tween is running.

 

If there is a use-case that isn't working, please let us know.

[tauab]

Thanks Carl!

 

Exactly what I was looking for. Appreciate the swift response.