Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mouktarart

How to make gsap draggable stop on click and start on click

Recommended Posts

Hi, let me start by saying i love gsap and the hard work you guys put in it, since thats out of the way as you can see in my code pen i have two problems i need to solve. 

1. When i drag and click on a card before inertia velocity go to zero the cards container animation position rest to x zero break. 

2. When a crad onclick happens i want the animation drag to stop and when clicked again or a close button to reverse animation and rest where the card was.

 I feel am close but i need help 😅

See the Pen YzVxvEv by mouktarart (@mouktarart) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey @Mouktarart

I'm afraid I don't understand this question - could you possibly rephrase it?

9 hours ago, Mouktarart said:

. When i drag and click on a card before inertia velocity go to zero the cards container animation position rest to x zero break. 


I see what you mean by the second question though - if someone clicks while still moving the section opens up in the wrong place. - I'd probably get around this by only allowing the section to open when the drag has completed. Would that work? It would be simpler!

  • Like 1
Link to comment
Share on other sites

This was a fun challenge for me to show how Flip plugin can make this a lot easier...

  • You can get rid of all your calculatePosition() stuff and all the pre-calculated tweens (you want them to be dynamic anyway since the user can drag to various spots)
  • For the activated zoomed-in state, we can re-nest the item so that it's no longer in the <ul> at all, but sitting higher in the DOM. That way you can simply write some CSS styles for how you want that state to look. In my demo, I added an "active" class. 
  • When someone clicks to zoom-in, we'll do a FLIP animation. We capture the state, then make all our changes (re-nesting the element and applying the "active" class) and swap in an invisible <div> that simply props open the list to prevent it from collapsing. 
  • Let Flip do all the magic to make it LOOK like it was in that former position and then animate to the new/current one. 

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

 

I simplified your background image animation code too in order to leverage function-based values.

 

Once you grasp what Flip can do, it opens up some entirely new possibilities. And since you're "Shockingly Green", you already have access to it. 

 

Does that help?

  • Like 4
Link to comment
Share on other sites

Yes jack this is a great a demo and a start for me to learn about flip plugin and definitely a great example for this scenario. Thank you both for the reply

Link to comment
Share on other sites

Happy to hear it helped. 🎉

 

Let us know what you think about Flip once you dig into it. I know it takes a little time to wrap your head around when you're used to a certain mindset that's always about "animate these properties to these values..." (which you must always determine). With Flip, it's more about thinking in terms of states but of course you get control over the easing, duration, etc. 

 

Have fun!

Link to comment
Share on other sites

This is a great demo to learn from 🥳

  • Like 2
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.
×