Animating a dashed line from point A to B

[TikaL 0 Likes (Newbie)]

Hi guys,

 

So what I'm trying to create is an animation where:

 

1. Circle element starts the animation with a radar blip effect - DONE
2. My dashed path with mask is supposed to animate from where the circle element is positioned to the right and creates a circle - DONE
3. After animation is complete I'd like for the animation not reverse back but have the path from where it starts follow the path and end at the animation. I guess follow the animation? Sorry lack of a better description

 

I've included a screen grab of what I have since my codepen is not animating at all? Thanks!

 

See the Pen QWbpxyX by TikaL13 (@TikaL13) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey TikaL and welcome to the GreenSock forums! Thanks for being a Club GreenSock member, we couldn't do what we do without people like you.

 

The drawSVG in your CodePen isn't working because you were trying to load the V2 version but you are loading GSAP 3. You should load the v3 version of drawSVG  

 

5 minutes ago, TikaL said:

After animation is complete I'd like for the animation not reverse back but have the path from where it starts follow the path and end at the animation. I guess follow the animation?

From what I'm understanding, you want the line to "shrink" from the left to the right (towards the circle)? Do you mean like this?

See the Pen QWbpBjK?editors=0010 by GreenSock (@GreenSock) on CodePen

[TikaL 0 Likes (Newbie)]

@ZachSaucier, this is exactly what I was trying to do here. Thank you!

 

One last question: If I wanted to have a dynamic starting point but still end the animation and the same exact x, y position what would be the best approach to adjusting the path?

Edited February 26, 2020 by TikaL
Need some additional advise.

[mikel 4,775 Likes (Superhero)]

Hey @TikaL,

 

You could use the AttrPlugin

 

See the Pen ExjWeej by mikeK (@mikeK) on CodePen

 

Happy dashing ...

Mikel

[TikaL 0 Likes (Newbie)]

Hey @mikel, thank you for this. I'm trying to elongate a path using this approach for example. I have this initial path d value.

 

M170.6 28.5l477.5-.5c0-14.9 12.1-27 27-27s27 12.1 27 27-12.1 27-27 27-27-12.1-27-27

 

And at some point in my animation I need this to dynamically be updated to this:

 

M68.2 28h579.9c0-14.9 12.1-27 27-27s27 12.1 27 27-12.1 27-27 27-27-12.1-27-2

 

But when that tween or moments happens I get errors:

 

Error: <path> attribute d: Expected move to path command ('M' or 'm'), "undefined".

 

I'm in a vue app and here is a look at the function that I'm calling at a particular moment. ".pointer" is the dashed path and ".dash" is the mask I'm using to create a growing and shrinking effect. 

 

animateHotspot: function() {

        const hsTL = gsap.timeline();
        let path = this.getData ? this.getData.hotspot.desktop.mark : '';

        hsTL.to('.pointer', { attr: { d: path } })
          .to('.dash', { attr: { d: path } });
      
      }

    }

 

I'm wondering what I'm doing wrong here? this isn't the whole snippet but I wanted to test if dynamically swapping out the "d" value would work. 

 

I was also curious how one would stop a repeating rotation on an element on click or some type of event?

[mikel 4,775 Likes (Superhero)]

Hey @TikaL,

 

I have no idea re the error:

 

See the Pen MWwmzdQ by mikeK (@mikeK) on CodePen

 

Even if you work in vue, a 'normal' CodePen is always helpful.

 

Maybe someone else has an explanation for the error.

 

Mikel

[mikel 4,775 Likes (Superhero)]

Hey @TikaL,

 

Please check your SVG - I suspect some mistake while drawing or transferring (?).

Here a layout which is ok.

 

See the Pen yLNbGvR by mikeK (@mikeK) on CodePen

 

Happy searching and testing ...

Mikel

[GreenSock 18,597 Likes (Superhero)]

Yep, the problem is that you're trying to animate the mask's "d" property using a normal "attr:{}" tween but the starting and ending values have DIFFERENT quantities of numbers and the drawing commands are different: 

 

// start
"M170.6 28.5l477.5-.5c0-14.9 12.1-27 27-27s27 12.1 27 27-12.1 27-27 27-27-12.1-27-27"

// end (MISMATCHED!)
"M68.2 28h579.9c0-14.9 12.1-27 27-27s27 12.1 27 27-12.1 27-27 27-27-12.1-27-2"

Notice the first drawing command is "l" in the starting string, but "h" in the 2nd. Only MorphSVGPlugin can convert all those values into cubic beziers and match everything up seamlessly. Animating just the complex strings themselves (matching the numbers in order) won't work. 

 

So can simply swap out attr:{d: ... } for morphSVG: ...

 

Does that clear things up?