Jump to content
Search Community

Physics while dragging?

Sembiance test
Moderator Tag

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'm using Greensock to drag a stack of cards as seen in the code pen, simply drag the top card in the stack and you'll see the rest come along for the ride.


My goal however is to have the stack rotate/flop back and forth like it appears to in this screenshot: image-02-700x393.jpg


So basically while dragging around, the stack should move around a bit, as if it were heavy.


My guess is the Greensock Physics2D package might come in handy here, but I'm not exactly sure how I would approach using it while a stack is being dragged when the user could drag it in any direction at any time.


Any ideas?



See the Pen YxpJpv by Sembiance (@Sembiance) on CodePen

Link to comment
Share on other sites

A couple things I noticed in your demo. You're using old versions of GSAP. You need to use the actual version number for cdnjs now.


Something that appears to missing from the docs is that there is now a deltaX and deltaY property.

function onDrag() {
  var dx = this.deltaX;
  var dy = this.deltaY;


But you really don't need to calculate the velocity. Check out the VelocityTracker. It's part of the ThrowPropsPlugin.

var tracker = VelocityTracker.track(card, "x,y");
var vx = tracker.getVelocity("x");
var vy = tracker.getVelocity("y");


About creating this effect, it sounds like you understand that the dynamic nature of dragging does not lend itself well for tweens. Using the ModifiersPlugin like I did in the example above is probably the best way to do something like that with GSAP. It's either that, create a bunch of tweens on every drag, or use requestAnimationFrame, and do the transforms yourself.




Besides deltaX/deltaY missing from the docs, I noticed that the VelocityTracker isn't be exported with the module. Should be able to do this.

import { ThrowPropsPlugin, VelocityTracker } from "gsap/ThrowPropsPlugin";


  • Like 4
Link to comment
Share on other sites

Well I've gotten a little bit further:

See the Pen Xagzog by Sembiance (@Sembiance) on CodePen


But not quite there yet. Weird stuff happens if you drag fast and then suddenly stop. I've spent some time trying to fix that, but to no avail yet.


Also haven't quite wrapped my ahead around the math that will be needed to have the cards follow in a nicer line. I'll have to modify the x/y coordinates I'm guessing based on the angle the cards are at, or something :)

Link to comment
Share on other sites

Do you have a video of that? I'm trying to imagine how it looks in motion.


The basic idea of how to get this work is to use a follow the leader approach. The card you're dragging is the leader. The card on top of that will follow the card you're dragging, and so on, creating a chain.

See the Pen ZOvvOX?editors=0110 by osublake (@osublake) on CodePen


Or even better, a chain of vectors. These vectors could also be used to figure out the rotation, and even limit the amount of rotation.


The smooth animations are created using linear interpolation (lerp).

function lerp(start, end, t) {
  return start + (end - start) * t;


See the Pen 578e170d729eaa97fc54b89c57ee380f by osublake (@osublake) on CodePen


I might mess around with this concept later, but if you can provide a video or the actual game, that would help out a lot.

  • Like 5
Link to comment
Share on other sites

1 hour ago, Sembiance said:

Sadly I haven't been able to actually try it yet because on my only windows 10 machine the windows store is broken.


The same thing to happened to me. I think it was from an update a couple of days ago. I tried several things, but I think this it what ultimately fixed the issue. It said my store cache was corrupted.




Link to comment
Share on other sites

20 hours ago, Sembiance said:

The screenshot comes from this free Windows 10 game: https://www.microsoft.com/en-us/store/p/spider-solitaire-collection-free/9wzdncrfjcjg#


Sadly I haven't been able to actually try it yet because on my only windows 10 machine the windows store is broken.


Got my Windows store fixed, turns out you need to have Windows Firewall turned on. I turned it off a while ago. Of course nothing in Windows "tells" you that you need it on, things just fail for no reason.


I checked out the apps, you are right, the animations are pretty horrible in reality. All jerky and doesn't feel natural or anything.


Hardwood Solitaire also has the stacks swaying around when dragging: http://www.silvercrk.com/solitaire/

Theirs is much more fluid and even has them flopping around as if they were light as a feather in the air.

Link to comment
Share on other sites

1 hour ago, OSUblake said:

Oh yeah, that's much better. So are you trying to make a game, or just experimenting?


I created the web game http://worldofsolitaire.com


I am currently in the process of a total re-write of the front end using GreenSock.


I coded it over 10 years ago and back then YUI 2 was cutting edge stuff that supported animation, dragging and dropping, etc. and so that's what I used at the core.


Despite adding TONS of stuff to the web site over the last decade (including hacking in touch support) it's LONG overdue for a massive update to bring it into the modern age.


I'm ditching support for IE6, IE7 and IE8, adding offline support, fixing some long standing issues and adding some big requested features that only made sense to do if I was going to re-write it.


So far Greensock has been working GREAT. Currently utilizing TweenMax, TimelineMax and Draggable. I imagine I'm a few more months away before I'm ready to launch a beta.


The website gets about 16 million visits a month from about 1.6 million unique visitors. I always put off rewriting as I didn't have a good library to replace the YUI2 stuff and I didn't feel like rolling my own using CSS transforms or requestAnimationFrame and didn't want to go WebGL route as I wanted to support as many of my existing players as possible. When I discovered Greensock and saw how well documented and how active the forums area and all the codepen examples, etc, I felt comfortable starting the rewrite. From what I've seen so far with my few weeks of Greensock usage, I have zero concerns about it's ability to handle things once I end up going live.


As to your original question, this physics thing with the draggable cards was just an experiment. I wanted to see if it could be done in a way that "felt great" and then evaluate whether it should be put into the new web site version as an option or as a default or not at all.



  • Like 4
Link to comment
Share on other sites

Those are some impressive numbers! And I had no idea there were so many different types of solitaire. 


If you find yourself needing better performance, like in a win animation, you could still do WebGL using PixiJS. It will automatically fallback to canvas if WebGL is not available, and will work the same. There's even a GSAP plugin to simplify animating with it.


The swinging motion in that Hardwood Solitaire game reminded me of something I did with a Pythagoras tree fractal. Move your mouse around, starting in the bottom left or right part of the screen, and watch how it curls up.


See the Pen ?editors=0010 by osublake (@osublake) on CodePen


How it works is pretty simple. It's just a recursive call, and on each iteration it draws 2 new boxes at the same angle, but scales their size down, causing it to curl.


I'm thinking the same technique could be used for swinging motion, but instead of scaling the size of a card, you would scale the rotation. So the card at the top will have very little rotation, and the rotation will increase slightly on each successive card.


I'm pretty sure that will create a nice looking bend between all the cards. I'll try to make a demo of that idea later today.

  • Like 6
Link to comment
Share on other sites

I set up a little prototype for you to play around with. It's not draggable at the moment. I just hooked it up to some range sliders so that you could experiment with some of the values. 


I nested the cards inside of each other to avoid having to do a bunch of matrix calculations. The downside to this approach is that you will need to reparent any cards you add or remove from a stack, and recalculate their position.



See the Pen ZJXgVK by osublake (@osublake) on CodePen



  • Like 4
Link to comment
Share on other sites

Blake, thanks so much for the swing example. It looks quite promising and I think that would be a great way to implement things and it shouldn't be too hard to do while dragging. I'll dig into this more once I get some of the items I'm currently working on completed.


I just have to say that you have gone above and beyond and this forum wouldn't be the same without you. Not sure if you are an employee of GreenSock or not, but if not, they owe you a big debt as these active forums is one reason I ended up choosing GreenSock to begin with.



  • Like 3
Link to comment
Share on other sites

Yep, @OSUblake is a rock star around here. Not exactly an "employee", but certainly an authoritative moderator and we consider him very much a part of the GreenSock family, along with all the other moderators like @PointC


Happy to hear about your positive experience thus far, @Sembiance. Let us know if you need anything else. Happy tweening!

  • Like 3
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.
  • Create New...