Draggable element snapping back after tween?

[pragmatic]

Hello all

 

I find myself in a bit of a jam here. I've got an SVG (image of a timeline) that I need to do a couple of things with.

 

First I need to tween to a certain point in the timeline (changes for each new page), now this is fine, I can do that with no issues.

 

However the second part is causing a problem.

 

Since I don't want a nasty horizontal scroll wheel below my image, I've hidden it and added a bit of text to tell the user to drag the timeline to move along it.

 

Only issue is that once the tween is finished, the draggable element is created and the image snaps back to the start of the timeline (x:0).

 

Here is the function:

TweenMax.to(self.$svgWrapper, 1.5, {
                scrollTo: {x: textPosOffset},
                ease: Power4.easeOut,
                onComplete: function() {
                    Draggable.create($svg, {type:"scrollLeft", edgeResistance:0.65, bounds:self.$svgWrapper, throwProps:true});
                }
            });

If anyone could help me solve this issue I would really appreciate it, I just need the image to not snap back to the start.

 

Thanks

[Jonathan]

Hello pragmatic, and welcome to the GreenSock Forum!

 

Just so we can help you better, do you have a ode example so we can test your code live so we can see exactly this behavior?

 

Here is a video tut by the Might Carl , on how to create a limited codepen example showing the issue.

 

 

This way we can test your code live as well as see it in context with what you described how your page is setup.

 

Draggable Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/

 

Thanks!

[pragmatic]

I was actually meaning to reply to this earlier. I solved the issue incase anyone else stumbles across this same conundrum.

 

It seems really obvious now but making the element draggable before the tween was all that I needed to do. Here is a snippet from the code:

 

Draggable.create($svg, {type:"scrollLeft", edgeResistance:0.65, bounds:self.$svgWrapper, throwProps:true});

            TweenMax.to($svg, 1.5, {
                scrollTo: {x: (textPosOffset) - 800},
                ease: Power4.easeOut
            });

Hope it helps someone in the future!