Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nino-la

Line drawing SVG

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: https://codepen.io/nette-la/pen/ZEYPyrK

 

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?

Share this post


Link to post
Share on other sites

Hey nino-la.

 

This sort of thing is much easier if you use GSAP's DrawSVG plugin and GSAP 3 :) Using GSAP 3 will let you use defaults, the shorter form of eases, a more slick API, and much more. Check it out:

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

  • Like 1

Share this post


Link to post
Share on other sites

I know, but it's not free. Any way I can do this with gsap only?

Share this post


Link to post
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 3

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×