donny Posted June 16, 2021 Share Posted June 16, 2021 Hi, as the Flip plugin can move things around the DOM, could it be used together with Draggable to make sorting items with variable heights easier? For example in the provided Codepen, I'd like to sort these two items with behaviour similar to: See the Pen mAyyQP by joelcoxokc (@joelcoxokc) on CodePen Clearly it's not playing well together currently, but would it be possible? See the Pen zYZeOmJ by MichaelHeyDonny (@MichaelHeyDonny) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 16, 2021 Share Posted June 16, 2021 Oooh, this is a fun challenge. I'm up against it a bit today but if no one grabs this I'll loop back round later and give it a whirl! Link to comment Share on other sites More sharing options...
OSUblake Posted June 16, 2021 Share Posted June 16, 2021 My initial thought is that it might not work well with Flip because you are dragging an element you are trying to animate. Maybe if you use some sort of placeholder element the same size as the one you are dragging. 2 Link to comment Share on other sites More sharing options...
donny Posted June 16, 2021 Author Share Posted June 16, 2021 Thank you both, yes I'm thinking the same, in regards to using a placeholder element. Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2021 Share Posted June 17, 2021 Yeah, a placeholder is probably your best bet. There were various logic issues in your pen and I tweaked a few things to come up with this: See the Pen yLMZxmO?editors=0010 by GreenSock (@GreenSock) on CodePen You were checking hitTest on the same element that you were dragging, causing false positives You should suspend the logic while the flipping is happening, otherwise you'll get hitTests that fire while things are animating and overlapping You were including the element that you were dragging in the flip animation itself, thus you'd create conflicts where an animation is trying to make the element go to one place while the drag is trying to pull it elsewhere. It isn't perfect and I don't have time to work out all the details for you right now, but hopefully that at least gives you something to go off of. Happy tweening! And thanks for being a Club GreenSock member! 🙌 3 Link to comment Share on other sites More sharing options...
donny Posted June 17, 2021 Author Share Posted June 17, 2021 Thanks for the feedback Jack, yes I threw that together pretty quick. I've worked a little more on it today, and will refine further soon and also look to integrate your approach. Note I think for now this demo requires a min width of 500px to work properly. See the Pen MWpLLeb by MichaelHeyDonny (@MichaelHeyDonny) on CodePen 1 Link to comment Share on other sites More sharing options...
donny Posted September 7, 2021 Author Share Posted September 7, 2021 Forgot to mention more recently, I've had success using Draggable and FLIP together for what I needed. Here's an example that includes a bit of my final solution: See the Pen yLXVxbx by MichaelHeyDonny (@MichaelHeyDonny) on CodePen The top left blue bars are the triggers. There's a few things missing in this example like how to handle empty parent containers etc but thought I would share. The FLIP plugin has certainly helped greatly in providing a solution to what this has replaced. So thanks GSAP as always! 5 Link to comment Share on other sites More sharing options...
Cassie Posted September 7, 2021 Share Posted September 7, 2021 This is great! Thanks for sharing Donny. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now