Modify Opacity (alpha) When Dragging?

[Flinn]

Hey All,

 

I'm pretty new to these tools, only been working with them for about a week and I'm VERY impressed -- Great work! I'm using the tools to assist me in building a mobile app and they are performing delightfully with phonegap on both iOS and Android devices. Kudos.  

I am wondering if there's an easy (or at least highly performant) way in which to cause a "Draggable" item (in my situation, basically a div/box on the screen) to change it's opacity/alpha based upon how far away it gets from the "bounds" it's located within?

Basically, I want the user to be aware that moving the box a certain amount will dismiss it and remove it by fading the box out more and more as it moves away (and I'd want to fade it back in if it returns), but I haven't found a great way to do this yet.

Any help/thoughts would be greatly appreciated -- Thank you!

 

-Flinn

[GreenSock]

Sure, you can tap into the maxX/minX/maxY/minY and run some conditional logic in an onDrag (and optionally in an onThrowUpdate). Here's a demo:

 

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

 

Is that the effect you're looking for?

[Flinn]

Hey, 

 

Thanks so much for this   -- This was exactly what I was looking for. I was slightly confused by how the draggable plugin works with the tweenlite library, but this really helps clear things up.

 

Best,

Flinn