Jump to content
GreenSock

Cazza

GSAP 3 drag and draw along path

Recommended Posts

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

Link to comment
Share on other sites

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. :)

 

  • Like 3
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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. ;)

  • Haha 1
Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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 :D

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

 

  • Like 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×