Jump to content
Search Community

DrawSVG path draws from right point to left point, but I am looking for left to right. Have I drawn all my paths the wrong direction?

studioalloy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've drawn all my SVG paths from left to right. At least I think so, but all my animations draw from right to left. Is there an easy way to reverse the order in which the SVG paths draw? I've tried several solutions with `.staggerTo()` and `.staggerFromTo()` with `drawSVG: "0% 100%"` or `drawSVG: "100% 0%"`, but maybe I don't understand the syntax to fix the issue. 

 

Also how can you animate two `.staggerTo()` at the same time. I thought my `, 'sameTimeTwo'` label would work, but it seems like it doesn't. 

See the Pen VwZjoXx by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
Link to comment
Share on other sites

@mvaneijgen,

 

@PointC is our SVG guru and his hint:

 

Regarding your <path> direction problem:

Quick tip: when you create your path, place a temporary arrowhead on the beginning of it via the stroke panel in your vector software. If the direction is incorrect, you can easily reverse it. In Adobe Illustrator you do that by the menu Object --> Path --> Reverse Path Direction. Once it's going in the desired direction, simply remove the arrowhead and export.

 

Maybe this pen (check the different 'starting points) is helpful

 

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

 

Happy tweening ...

Mikel

  • Like 6
Link to comment
Share on other sites

 

@mikel thanks for the response. I clearly do not understand the syntax, because setting the path to `100% 100%` and then go to `100%`. Fix the issue for me. Here is the full code. 

 

```.staggerFromTo("#text *", baseTiming, { drawSVG: "100% 100%"}, { drawSVG: "100%", stagger: 0.2 }, 'sameTimeTwo')```

 

The only thing now is to start the two (text layers) too animate at the same time. The new `stagger: {...}` syntax want something else from me, but I can't find anything in the docs. 

 

Codepen updated to old stagger syntax an that works. 

Link to comment
Share on other sites

Hey @mvaneijgen,

 

from the docs

 

So TweenLite.to("#path", 1, {drawSVG:"20% 80%"}) animates it from wherever the stroke is currently to a state where the stroke exists between the 20% and 80% positions along the path. It does NOTanimate it from 20% to 80% over the course of the tween. This is a GOOD thing because it gives you much more flexibility. You're not limited to starting out at a single point along the path and animating in one direction only. You control the whole segment (starting and ending positions). So you could even animate a dash from one end of the path to the other, never changing size, like TweenLite.fromTo("#path", 1, {drawSVG:"0 5%"}, {drawSVG:"95% 100%"});

 

That's the secret of {draw:"100% 100%}.

 

Happy drawing ...

Mikel

 

  • Like 4
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...