Jump to content
Search Community

Animating a dashed line from point A to B

TikaL test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

@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 by TikaL
Need some additional advise.
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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? 

  • Like 3
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.
×
×
  • Create New...