Jump to content
GreenSock

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

Swipe cards using Greensock

Recommended Posts

Hello all, How can I swipe these cards on desktop and touch devices using GreenSock?

I'm trying to apply swipe effect on cards and move cards same as clicking on next and previous button. Anyone help me with that?

Thanks in advance.

See the Pen xJBmwN by LeoZoe (@LeoZoe) on CodePen

Link to comment
Share on other sites

If you just want to swipe and don't want to redo all your work, then you can use trick as in following demo.  I am just using Draggable to detect swipe, you can add that on top of your demo.

 

See the Pen EopaYe by Sahil89 (@Sahil89) on CodePen

 

If you want to drag and willing to recreate everything then take a look at demo by @OSUblake in following thread. That's where my second journey with GreenSock started.

 

The demo is responsive and you can use media queries as well, given that all your slides are of same width.

 

 

  • Like 4
Link to comment
Share on other sites

Hi Sahil, thank you for your help. I tried to put draggable code top of my demo code. It shows drag area between two cards but not actually dragging slides just like your below codepen demo. Can you please check my above codepen. would you also please show me how to do below swiping in my carousel (above codepen already updated).

See the Pen gGLaMv by Sahil89 (@Sahil89) on CodePen

 

Link to comment
Share on other sites

Ohk there is too much confusion here.

 

You looked at my demo instead of the comment I linked which had Blake's demo. But forget about it, you will need to study that entire demo before making any changes to it.

 

Now focus on your demo only. In your demo you were supposed to trigger those button clicks. And please avoid editing your demo after posting it. Fork your original demo instead.

 

Also keep in mind, if you practice by copy pasting code instead of trying to understand and learn from it, you will make your life really hard.

 

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

 

  • Like 5
Link to comment
Share on other sites

Actually, I have read through the both links but did not understand very well and I was not aware that I have to trigger buttons too. But thank you so much for your help and valuable feedback at the end. I'm trying hard to learn this all. Just one more thing, I guess I need to download "Draggable" plugins to achieve this. Am I right?!

Link to comment
Share on other sites

Ya you will need Draggable. I added some comments in the demo so you can understand what is happening.

  • Like 2
Link to comment
Share on other sites

Thank you so much for your all help Sahil!

 

  • Like 3
Link to comment
Share on other sites

Sorry Sahil but one more question about Draggable. Is there any way we can disabled drag event after swiping the cards and enable it. I read about disable() and enable() methods. But did not understand very well!

Link to comment
Share on other sites

My intentions weren't to discourage you from posting anymore questions, so don't hesitate.

 

You can enable disable draggable entirely using those methods, but you can't disable certain methods. You will need to add conditional logic instead to avoid execution of certain code.

 

But I am not sure why do you need it, It works just fine as it is. Are you using onDrag event instead of onDragStart? You don't need to do that. onDragStart fires only once and it fits perfectly with what you are doing.

  • Like 4
  • Thanks 1
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.
×