Jump to content
Search Community

Line drawing SVG

nino-la test
Moderator Tag

Recommended Posts

Hi there, 

I'm trying to create a line animation that is traveling from A to B, fades in, than continues from B to A.

Here is what I have so far: 

 

Basically, I want to make line disappear and then re-draw itself from top to bottom when it comes back. Hope this makes sense. What's the best approach with gsap to do this?

See the Pen ZEYPyrK by nette-la (@nette-la) on CodePen

Link to comment
Share on other sites

Theoretically yes but I'm not familiar enough to whip anything up quick for you. Besides, you're kind of asking us to make one of our paid products free just so you can avoid paying for our product... We love to help people but that may not be the best business decision for us, you know?

 

We believe that a Club GreenSock membership will pay for itself in a matter of hours. Perhaps even in the time that you'll save trying to figure this out yourself! Plus you get access to all of the other Club GreenSock plugins which can save you tons of time and open up some exciting possibilities for your animations.

  • Like 4
Link to comment
Share on other sites

Hey nino. There are around 70,000 threads on these forums, the vast majority by users who don't have Club GreenSock and likely never will. Not to mention all the people who are helped without ever making an account. We're here to help however we can!

 

But like I said, I don't know how to do what you're asking. It's not a trivial thing as far as I know. And unfortunately I don't have time to figure it out right now. You may very well receive aid from another user, I was just trying to be helpful in providing the information that I did. 

  • Like 3
Link to comment
Share on other sites

17 minutes ago, nino-la said:

I wasn't aware I needed to buy your plugin to get help.

Like @ZachSaucier said, that's totally not our attitude around here. You don't need to buy anything from us. We spend countless hours (unpaid) helping people around here. 

 

I personally put a lot of time and effort into DrawSVGPlugin and it solves a bunch of problems that aren't always obvious to people. For example, there are various browser bugs and inconsistencies that make it difficult to achieve this effect. Microsoft browsers and Firefox break under certain conditions, and Safari won't render correctly in certain scenarios too. There are workarounds baked into DrawSVGPlugin that solve all that stuff so you don't have to worry about the headaches. Things "just work". 

 

So yeah, I think Zach was just saying that it'd feel kinda weird to spend a bunch of time teaching you how to avoid joining Club GreenSock and reproduce one of our "members only" tools for free, that's all. But seriously, we're very happy to help people around here, yourself included. 

 

Let us know if there are any other GSAP-specific questions we can help you with. Happy tweening!

  • Like 3
Link to comment
Share on other sites

1 hour ago, nino-la said:

I thought this forum was something similar to stackoverflow for gsap.

 

Its better. There is a constant chain reaction of brilliant and immensely helpful users providing GSAP related solutions to other users every day here. For example the code you found and used in your example was actually derived from a member of these forums @Carl, 7 years ago. 😉

 

https://stackoverflow.com/a/19720020

https://greensock.com/forums/topic/8510-animating-svg-paths-within-a-timeline/?do=findComment&comment=33350

https://greensock.com/forums/topic/10903-svg-animation-changing-path-object-in-timeline/?do=findComment&comment=43656

 

Glad you got things sorted to your liking. There is no pressure here, just friendly knowledgeable users.

 

 

  • Like 4
Link to comment
Share on other sites

15 hours ago, nino-la said:

I was able to figure it out. Stroke dasharray/dashoffset needs to go negative and then it appears as on the example. 

A lot of people think that they can just animate the stroke dasharray/dashoffset and it appears to work in some browsers just fine, but that solution doesn't always work consistently. Here are a few things DrawSVGPlugin solves for you:

  • if a non-scaling-stroke is applied, it will mess up your path's length
  • Calling <path>.getTotalLength() in IE locks the repaint area of the stroke to whatever its current dimensions are on that frame/tick.
  • Firefox has a bug that throws an error if the element isn't visible.
  • Microsoft Edge has a bug that causes it not to redraw the path correctly if the stroke-linecap is anything other than "butt" (like "round") and it doesn't match the stroke-linejoin.
  • Firefox doesn't always return an accurate getTotalLength(), causing things to be a bit short at times.
  • Some browsers render artifacts if dash is 0.
  • When the element has vector-effect="non-scaling-stroke" and the SVG is resized (like on a window resize), it actually changes the length of the stroke! DrawSVGPlugin can automatically adjust.
  • A bug in Safari causes strokes with rounded ends to still show initially when they shouldn't.
  • You can't getTotalLength() on other shapes besides a <path> (like a <rect>, <circle>, <line>, etc.)

Again, that's part of what makes GSAP special - we try to figure out workarounds for all these things so your animations "just work". You're welcome to put together your own custom solution and it may work fine for your scenario, but hopefully all the time and headaches our bonus tools solve will make the membership pay for itself very quickly and ultimately make you more profitable as a developer. But there's no pressure to join, really.

 

Happy tweening!

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