GSAP 3 drag and draw along path

[Cazza 2 Likes (Newbie)]

Hi all, I hope somebody can help me. I'm new to GSAP3. I have looked at many example pens but none of them are using GSAP 3 to drag an object along a path. When I try to adapt them using the migration guide I just get lost due to my noobiness - there are so many ways to get things just a tiny bit wrong which breaks my code entirely. 

 

In my demo codepen, there is a red arrow moving along a red wavy line, whilst drawing a fat line over the top. At the end, a red smiley face appears. This bit is working.

 

What I want to happen with the blue line is for the user to drag the arrow along the path of the blue line. As they drag the arrow along the line a fat blue line is drawn over it (similar to the red line above). Then when they reach the end point of the line and release, a blue smiley face appears.  

 

I don't need any fancy eases or inertia throw stuff, I want to keep it really simple. I can't find any way of attaching the draggable arrow to the line. Ideally I'd also like the arrow to only move forward along the wavy line - if the user tries to drag it elsewhere it shouldn't move.

 

Thanks, I hope this makes sense!

See the Pen qBOjVEv by cazzac (@cazzac) on CodePen

[PointC 14,466 Likes (Superhero)]

Hi @Cazza 

 

Welcome to the forum and thanks for joining Club GreenSock.

 

That's not a trivial task. We've had a few discussions about it in the past. Here are a couple threads which may help.

Hopefully that'll give you some ideas.

 

Happy tweening and welcome aboard.

 

[ZachSaucier 7,162 Likes (Superhero)]

This was actually one of the things that I first wanted to do using the MotionPathPlugin. As long as the overall direction of the path is linear (and doesn't have angles too steep like circles) you can do it using this approach:

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

[PointC 14,466 Likes (Superhero)]

Nice Zach. 👍 

 

I've tried this a few times and it always feels so clunky. I'd love to do this around a looping path and have it just feel fluid and smooth. Maybe Jack will have that all ready for us in GSAP 4. 

[Cazza 2 Likes (Newbie)]

Thank you Craig, I will have another look at those pens. I think my main problem with these is trying to make them work with GSAP 3 as I'm not understanding all the differences so I keep introducing errors as I try to migrate. I'll keep at it though!

 

Zach - thanks for your help. That method is super-interesting. I'll have a play and see if I can apply it to my shapes. In my final project I will have some sharp angles so it might not be the best way to go for me. At the moment though I'm happy to just try things out and learn as I go.

 

 

[Cazza 2 Likes (Newbie)]

On 4/28/2020 at 3:44 PM, ZachSaucier said:

This was actually one of the things that I first wanted to do using the MotionPathPlugin. As long as the overall direction of the path is linear (and doesn't have angles too steep like circles) you can do it using this approach:

 

 

Zach, I've had a little play with your pen and managed to make it draw a line as it goes along and also only to allow forward movement - very pleased with this!

 

See the Pen eYpEZwe by cazzac (@cazzac) on CodePen

 

Now I'm working on how to make something happen when the dragged rectangle reaches the end of the line

[Cazza 2 Likes (Newbie)]

I have taken a fork of osublake's codepen 

See the Pen YYemRa by osublake (@osublake) on CodePen

 

What I'm trying to do is migrate it to use GSAP 3.

 

I've replaced TweenLite. with gsap. as suggested in the migration guide, but I can't get it to work. What am I missing? 

 

See the Pen xxwXPxW by cazzac (@cazzac) on CodePen

[OSUblake 18,533 Likes (Superhero)]

You need to load the latest version of Draggable and get rid of the old version of TweenMax.

https://cdnjs.com/libraries/gsap

 

Please note that my demo is not a good solution, and I'm not going to fix any problems with it as that would take too long.

 

 

[Cazza 2 Likes (Newbie)]

46 minutes ago, OSUblake said:

You need to load the latest version of Draggable and get rid of the old version of TweenMax.

https://cdnjs.com/libraries/gsap

 

Please note that my demo is not a good solution, and I'm not going to fix any problems with it as that would take too long.

 

 

Brilliant! Thanks for your help, all sorted now. It's doing what I need it to do and now I know how to migrate properly.

[goooon 5 Likes (Newbie)]

Hi all. Thank you very much for your help. I have followed @ZachSaucier 's method, but it moves toward the left when I press my target.

Here is a demo. Any Idea?
Thank you very much!

See the Pen QWZZYLN?editors=1111 by Gon82 (@Gon82) on CodePen

[goooon 5 Likes (Newbie)]

I just realized that it moves 70px. Which is the width of the target... I added that number in the calc and it Worked

var progress = clamp((this.x + hitareaRectWidth - bounds.x)  / bounds.width)

 

See the Pen QWZZYLN by Gon82 (@Gon82) on CodePen

[PointC 14,466 Likes (Superhero)]

I'm not seeing anything move to the left. It all looks correct to me. 

 

Just my two cent approach, but for little arcs and circles, I like to use type:rotation for these types of interactions. Here are a few examples from a Motion Tricks tutorial that never got published. Maybe they will give you some ideas too.

 

See the Pen dyggEJE by PointC (@PointC) on CodePen

 

See the Pen NWOOVYd by PointC (@PointC) on CodePen

 

See the Pen rNqqgvK by PointC (@PointC) on CodePen

 

Happy dragging.