GSAP Draggable in VueJS

[richard.foster]

Hi, I've been experimenting a bit with Draggable within the VueJS framework, and I've got a slider example mostly working - however I'm seeing a weird bug where the slide/scrubber handle position resets if I switch between control methods. So by that I mean, if I click and drag the main screen area to slide a couple of screens across and then use the handle/scrubber to continue sliding, the position of the slide 'card' resets or is no longer moving in sync with the scrubber. The same happens if I start scrolling the scrubber and then shift to click/drag the main screen.

 

I've spent a number of days slowly pulling out what hair I have left, and for some reason I just can't see the issue. Maybe someone with fresh eyes can throw some light on my predicament?

 

Apologies if there are any 'obvious' errors with the codepen example, it took a bit of wrangling to convert my SPC so it may not be perfect, but it shows the majority of my code and displays the issue I'm currently seeing. Any advice would be greatly appreciated.

See the Pen rbZydV by clownjuice (@clownjuice) on CodePen

[Rodrigo]

Hi Richard and welcome to the GreenSock forums.

 

It seems that this could be solved by using the update() method all Draggable instances have, which is very useful when something outside the realm of the Draggable instance itself, updates it's target. On top of that right now you're updating two different things, that also could be a source of problems.

 

Let's go backwards. First you're updating two different things. On the slides the Draggable instance is set to Scroll Left while the handle Draggable instance updates the slides X position. Those are two completely different things. My advice is to create a consistent update in both cases the handle callback and the property being updated by the Draggable instance that controls the slides.

 

Second, if you're updating the same property that a Draggable instance is affecting, then the recommendation is to use the update method in order to tell that Draggable instance that the value of that specific property has been updated outside the Draggable instance. In that case GSAP updates the value in the Draggable instance and the next time the user drags that updated value will be reflected:

 

https://greensock.com/docs/Utilities/Draggable/update()

 

Unfortunately I don't have enough time to fiddle with your code and try to create a working solution, but hopefully this will help you get started.

 

Happy Tweening!!

[richard.foster]

Hi Rodrigo,

 

Firstly thanks for the welcome and your fast response, both are appreciated.

 

I had a feeling the different draggable types (x, and scrollLeft) would be an issue, but I guess the method to my madness was due to setting both draggable items to the same type resulted in 1 of them not functioning correctly. So if both are set to scollLeft then the scrubber handle will no longer update it's position while dragging it, and if both are set to x then the slides won't snap to a new position while dragging them.

 

I've also had a tinker with the update() method and implemented what appears to be a working instance, though I can't say I see a difference in the outcome however this is most likely due to the above issue.

 

I've also tweaked some of the css as I have a feeling something in there is tripping this up, but alas I'm yet to stumble on the solution. I have updated a new codepen with my changes in case someone is able to spot my mistake(s).

 

See the Pen vMVOYR by clownjuice (@clownjuice) on CodePen

 

[Rodrigo]

Honestly I'd do my best to accommodate both instances to update the X value on the slides parent container and do some math in order to update the value from the handle Draggable instance in a way that reflects the drag amount of the handle.

 

Another possibility is to create a regular TweenLite instance that should be updated via the handle's Draggable instance. For example use a regular Draggable with snapping for the slides container. At the same time create a regular TweenLite instance (this should remain paused all the time) that moves the slides container all the way to the left using the X value on it and update that TweenLite instance using Draggable, like this:

 

See the Pen Batoc by rhernando (@rhernando) on CodePen

 

That is, IMHO, basically the simplest way to achieve that.

 

Happy Tweening!!

[richard.foster]

Thanks for all of the feedback and advice Rodrigo, I genuinely appreciate it.

 

After a lot of head-desking, I went back through some of my earlier sources and found a troublesome snippet of jQuery code that I had previously overlooked, and have so far been unable to convert to pure JS - even with the help of sites like http://youmightnotneedjquery.com/

 

The code in question looks like this:

 

var $slider = $("#slider")

$slider.outerWidth(sliderWidth)

 

sliderWidth is the total width of the scrollable area (i.e. the number of slides * the width of a single slide).  When I console.log '$slider.outerWidth(sliderWidth)' it returns a jQuery object (fn.init) rather than a value, which is what I would have expected. Without that code, the main slider will not function correctly, and it's rather frustrating.

 

 

I have updated my codepen to reflect the changes, and re-linked below for clarity:

 

See the Pen vMVOYR by clownjuice (@clownjuice) on CodePen

 

 

While it's great this now 'works' it would be awesome to be able to pull the jQuery code out, but as yet I'm unsure how.

[Rodrigo]

Well, I won't say that every jQuery method returns the jQuery instance, because I could be wrong, but is for chaining purposes. In this case you're basically selecting the slider element and assigning a width based on the calculations you made previously on your code.

 

What's odd is that you didn't thought about doing the same you're already doing with the handle, that is use a set() instance to set the width of the slider element:

 

TweenLite.set(slider, { width: boxWidth * sections });

 

That seems to work OK in the codepen sample.

 

This hopefully will help you get a better understanding of the different widths and heights of an HTML element object:

 

https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively

 

Happy Tweening!!!

[richard.foster]

OMG, you're absolutely right! thank you so much