Jump to content
GreenSock

martis

Draggable/ThrowProps with Force3D Toggle?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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
            });    
        }
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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 :D

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×