Draggable/ThrowProps with Force3D Toggle?

[martis]

I have a working draggable site with throwprops...

 

I have animations that play when dragging, and I want the animations to continue to play while the throwprops finishes its inertia.

 

When I have Force3D set to TRUE: Animations during the drag stutter, Inertia throwprops is smooth

When I have Force3D set to FALSE: Animations during the drag are smooth, Inertia throwprops stutters.

 

My first questions is: How can I toggle Force3D to FALSE during the drag and toggle it to TRUE when the throw props begins?

 

My second question is: How can I keep calling my processMobileTimeline function during the Interia throwprops?

 

I pasted me code... My first guess is I need to separate the Draggable call from the throwProps?

function setupDraggable() {
            
            Draggable.create("#site", {
                type:"y",
                bounds:$('#siteContainer'),
                force3D:false,
                onDrag:function () {
                    processMobileTimeline(this.y);
                },
                
                onDragStart:function() {
                    force3D:false;    
                },
                
                onDragEnd:function() {
                    force3D:true;    
                },
                
                edgeResistance:0.5,
                throwProps:true
            });    
        }

[Carl]

force3D is set on specific tween instances. It sounds like you have a number of objects animating while another object is being dragged. There is currently no way to toggle the force3D setting on multiple objects while dragging.

 

If you want to call processMobileTimeline() during the throw, you will have to configure your own ThrowProps tween onDragEnd instead of using throwProps:true. When you create the ThrowProps tween you can give it an onUpdate callback. More info on ThrowProps here: http://api.greensock.com/js/com/greensock/plugins/ThrowPropsPlugin.html

[GreenSock]

You can actually define an onUpdate on the Draggable instance itself, and it'll feed that to the tween

Draggable.create("#yourID", {onUpdate:yourFunction, edgeResistance:0.5});

And to be clear, that'll get called during the tween, not while the element is actually being dragged. If you need to call a function each time the element is moved, you can use the onDrag callback. 

 

And as for setting the force3D at various times, you can simply use a set() call, like:

TweenLite.set(element, {force3D:true});

But that won't affect tweens that are in progress.

 

I'm not sure why you'd be seeing the stuttering behavior, though, regardless of that setting. Feel free to post a simple example that demonstrates that behavior so we can take a peek.

[martis]

Thanks guys,

 

I will look into creating a custom throwProp after the drag ends... Any advice on easily getting the velocity at dragEnd?

 

I think I am seeing the stuttering onDrag when force3D is true due to the elements being inside the object that is being dragged.

 

Will post my final example when I figure this out

[GreenSock]

Ah, that makes sense - if you're animating things INSIDE the object that is being dragged, it means the browser has to keep painting and shuttling the new pixels to the GPU instead of just passing new coordinates to the GPU. 

 

As for the velocity, ThrowPropsPlugin makes that pretty simple. You can call something like this at the beginning:

ThrowPropsPlugin.track(yourElement, "yourPropertyName");

And that'll cause it to start tracking yourElement.yourPropertyName and then later (after at least about 0.15 seconds), you can grab the current velocity like this:

ThrowPropsPlugin.getVelocity(yourElement, "yourPropertyName")

In fact, a slightly more optimized way of doing that, is to keep hold of the VelocityTracker instance that gets spit back by the track() method, and then just call getVelocity() on that. You can even track multiple properties by passing a comma-delimited list:

var tracker = ThrowPropsPlugin.track(yourElement, "propertyName1,propertyName2");
//then later...
var prop1Velocity = tracker.getVelocity("propertyName1");
var prop2Velocity = tracker.getVelocity("propertyName2");

And by the way, Draggable automatically sets up the tracking of the pertinent properties internally. For example, if the "type" of your Draggable is "x,y", those will automatically be tracked, so you don't have to call track() for those - you can getVelocity() on those anytime directly through ThrowPropsPlugin.getVelocity(). If "type" is "rotation", that'll get tracked. Just keep in mind it's in radians. 

 

Have fun!

[martis]

Gotcha,

 

I think I am at a catch-22...

 

If I have force3D: false, the drag and inside animations are super smooth, but the throwProps movement of the container is laggy

 

View on iOS (iphone5 or ipad3): http://www.thegeminisociety.com/gia_force3D_false

 

 

If I have force3D: true, the drag and inside animations stutter, but the throwPropss movement of the container is super smooth. Not to mention the introduction animation wonks out a bit.

 

View on iOS (iphone5 or ipad3): http://www.thegeminisociety.com/gia_force3D_true

 

 

I tried to toggle them, but I get weird screen flickers and the inside animations during flick are still laggy...

 

View on iOS (iphone5 or ipad3): http://www.thegeminisociety.com/gia_force3D_toggle

I feel like I am so close, I really want to figure out how to get the best of both worlds!

 

Sorry about the big load

[Carl]

Here is a demo that shows a few ways to use the onUpdate, onComplete and onDragEnd callbacks to retrieve a bunch of velocity and coordinate data:

 

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

 

Of note, the x velocity is displayed as soon as the drag ends and the tween starts.