value32 Posted September 1, 2020 Share Posted September 1, 2020 Hi there, I successfully modified Blake's Pen "Draggable Auto-Slider" See the Pen veyxyQ by osublake (@osublake) on CodePen to be more responsive to fast touch gestures like provided in the swiper framework. when i tried to update everything to gsap3 the code breaks without error messages. Would someone be able to point out where I did wrong? thanks so much in advance! best See the Pen ExKvObb by value32 (@value32) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 1, 2020 Share Posted September 1, 2020 Hey value32. This pen was already converted to GSAP 3 here: Link to comment Share on other sites More sharing options...
value32 Posted September 3, 2020 Author Share Posted September 3, 2020 Thanks, Zach! Didn't saw this, my bad. Unfortunately I am not getting this to work like before when alterting the slideshow example in gsap2. The first swipe is fine, after that it gets weird. I'm not super familiar with Draggable, Snapping or Wrapping. I just want the slide animation to start right after dragging ends (no snapping, no inertia etc). It would be awesome if you could look at the pen and give me a hint... Thanks alot! See the Pen ExKbZmN by value32 (@value32) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 3, 2020 Share Posted September 3, 2020 1 hour ago, value32 said: It would be awesome if you could look at the pen and give me a hint... What's wrong with the version in the other thread? Sorry, I just don't want to invest my time for something that has been done already If you have a specific question I'm happy to help. Link to comment Share on other sites More sharing options...
value32 Posted September 4, 2020 Author Share Posted September 4, 2020 Totally understand that 😃 My goal is to build my own gsap sliders instead of hooking on top of touch/swipe capabilities from popular slider-framework like "swiper". the main problem with the example above is that it feels slow in my opinion. while i have to over-swipe the snap area to trigger the animation other frameworks keep it simple. on a drag's end they animate to the nearest border within the direction. this give's you a super fast and "common reactive" feeling when swiping quickly. TL;DR: need no throw/inertia logic, just snap-animate immediatly onDragEnd Link to comment Share on other sites More sharing options...
value32 Posted September 4, 2020 Author Share Posted September 4, 2020 So I managed to get this to work like expected: See the Pen ExKbZmN by value32 (@value32) on CodePen But how would I get the actual active SlideIndex .... ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 4, 2020 Share Posted September 4, 2020 4 minutes ago, value32 said: how would I get the actual active SlideIndex .... ? Inside of updateProgress you could calculate it based on the position divided by the slideWidth. Link to comment Share on other sites More sharing options...
value32 Posted September 4, 2020 Author Share Posted September 4, 2020 That got me on the right track, thanks! Hope my solution is okay in terms of performance. There is just one little thing left How would I be able to know the proxy X for a specific slide? Eg jumping to a specific slide ... thanks in advance! See the Pen ExKbZmN by value32 (@value32) on CodePen 1 Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted September 4, 2020 Solution Share Posted September 4, 2020 58 minutes ago, value32 said: jumping to a specific slide Use algebra to rearrange the formula I posted in the last comment index = currXPos / slideWidth -> currXPos = index * slideWidth. 1 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