Add class when you start to swipe card left or right- also add threshold to snap back to middle


Here is my codepen.

I have two span items which I styled similar to tinder. Easiest way I figured was to start off with span class with opacity of 0 and then add class “appear” which has opacity of 1. So basically I need to add appear class depending on direction user begins to swipe. Currently I set both span items opacity to 1 so you can see what I am talking about. The “Buy” span will appear when began swiping to the right and the “Pass” span will appear when start to swipe left. I also want to set a threshold where if you are holding on to card but drag back towards the middle it should snap back to center. Only if you pass certain distance will it fly away. Please please any help I tried all last night!!!