Jump to content
Search Community

Swipe cards using Greensock

LeoZ 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

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
  • Thanks 1
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

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