Slider with gsap.Observer

[iamsebastn]

Hey hey, over the last days, I tried to improve my GSAP x React skills and wanted to created a draggable slider with gsap.Observer. 
So far so good. In theory, it works🎉 but practical it doesn't. 
The problem is: When I drag the element the drag isn't smooth. It jumps and jumps. I played a little bit with .onUpdate. On the first glance it seems kinda working. But it crashes the boundaries (0-100%) and also makes the jump more worse. 

Soooo tbh I'm at a point where I'm stumped. Any help on how to make this smooth is much appreciated👋
https://codesandbox.io/s/draggable-example-kwrfp1?file=/src/slider.jsx

[GreenSock]

Hi @iamsebastn. I glanced at your demo and I'm having a tough time understanding what you're trying to do there with much of that code. If you're trying to make something draggable, is there a reason you're not using Draggable? 

 

Also, you're not doing proper cleanup in React. I'd strongly recommend using gsap.context() with React to make cleanup super easy. Please read this:

 

Why are you creating an entirely new gsap.fromTo() on every single movement of the wheel/pointer/touch? That's super wasteful - you're creating a ton of conflicting tweens that are all trying to animate the same thing to different values. And what are you trying to do with tl.progress(track) inside of an onUpdate? 

[iamsebastn]

Hey Jack! Thank you for getting on my problem! I read a post in the forum, where somebody asked if it would be possible to create a draggable slider with gsap.Observer. So I tried it on my own & it worked. Kinda haha. Anyways, is there a reason (other reason than simplicity) to use Draggable over Observer for a slider? 

Thanks for the hint! I read through the docs lot carefully this time! 
I made a few tweaks and the slider with Observer works perfect now! 

Anyways, like I asked before, what are the reasons, you would choose draggable over observer in order to create a slider? Does draggable causes better performance?

[Cassie]

Draggable is nice and simple and easy!

Observer is more low level so you have to roll a lot of the functionality yourself. It's basically like having to build your own dragging functionality. Draggable is made, optimised and battle tested to make dragging stuff super easy, reliable and cross browser friendly.

[GreenSock]

Yep, @Cassie is exactly right. Observer is very low-level, but Draggable has solved a bunch of problems you might run into with trying to build something from the ground up. For example, snapping, inertia/flicking, z-index boosting, cursor swapping, killing existing tweens on the element when you press, context menu cancel-dragging, bounds, scroll position adjustment, working around bugs on various browsers like Android and iOS, etc. A ton of work has gone into Draggable. But if you just need something super-simple and you're willing to handle all those other edge cases or features yourself, Observer might be perfect for you.