GSAP Observer : Not working as expected, inconsistent behavior while swiping slides.

[Krishnakant]

I want to have a simple swiping slides set-up (not on scroll). As you can see there are multiple issues/inconsistencies in this implementation.

 

1. onLeft Callback seems to be working fine, when on first slide and on last slide and in between slides with smooth sliding animations. But onRight callback is very inconsistent, its animation gets quicker as we slide and it completely stops on last slide.
2. In mobiles where I want the swipe up and down to scroll normally through the sections below the swiping section, but swipe-left and swipe-right actions to be for swiping the slides. This does not seem to be working as expected OR at least I did not find any way to implement it in this example. When I try to scroll down, the slide gets swiped.

 

I am not an expert when it comes to implementing gsap animations but trying to figure-out what I can do with the gsap plugins referring to the documentations.

 

I have been trying to get this right, but could not fix it. Please guide me in the right direction.

 

 

See the Pen RwvxGgy by designjuice (@designjuice) on CodePen

[Rodrigo]

Hi,

 

If I understand correctly what you're trying to do, why not use Draggable with snap instead? That would simplify this quite a bit:

See the Pen WNPdgGP by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Krishnakant]

Okay, does this mean observer plugin is not quite capable of doing such simple thing? Or its not quite ideal to have it in situation like this?

 

I respect the work you have done in developing these plugins, but when it comes to actually using them - we find them to be not practical enough or need to use some other paid plugins.

 

Anyway, it looks like I have to use some other slider plugins available freely. Thank you.

[Rodrigo]

Hi,

 

I didn't said that the Observer Plugin is not a right fit for this, just that draggable makes it easier and simpler. For the snapping functionality you can also use onDragEnd if you don't want to use the Inertia plugin.

 

Observer can be used for something like this but, as you already found out, you have to come up with all the custom logic and GSAP animations, while draggable handles all that for you.

 

You are free to find a different tool based on the requirements and budget you have. Around here, no surprise, we vouch for our tools of course. They're the result of many years of hard work and GSAP is used in countless award winning sites and by world renowned creators. That, the actual results, are the best presentation card GSAP has and what we care the most about.

 

Good luck with your project!

Happy Tweening!