Jump to content
Search Community

problem with Drawsvg when doing it multiple times.

steve bartlett test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

I have a longer and complex annimation, I’m using Drawsvg early on, and it works perfectly, however when later in the timeline (it’s nested in another tl) i try and run the same drawsvg i’m gettting all kinds of weird things but nothing that i want. I’m sure it’s user error, i haven’t been using gsap very long. But I made a simple version on codepen and still can’t get it to work. 

 

any help would be appreciated. 

See the Pen ZEKdvYN by steveb485 (@steveb485) on CodePen

Link to comment
Share on other sites

 

Hey there Steve,
 

Welcome to the forums. 🥳

You haven't actually arranged your tweens on a timeline. Easy mistake to make.

I've refactored it for you.
 

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



A little note - '>'this position parameter is the default so you don't need to add it to all the tweens. 
Position parameters also have no effect on standalone tweens. Tweens need to be in a timeline to have an awareness and relationship to each other.

 

  • Like 5
Link to comment
Share on other sites

Hi @steve bartlett :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

I just wanted to point out that the first opacity tween isn't really doing much since the line is set to 0 length. You could set() the opacity to 1 at the beginning of the timeline to override the opacity in your CSS. Maybe something like this:

 

gsap
  .timeline({ defaults: { duration: 2 }, repeat: 1 })
  .set("#line", { opacity: 1 })
  .from("#line", { drawSVG: 0 })
  .to("#line", { opacity: 0 });

Happy tweening and welcome aboard.

:)

 

  • Like 4
Link to comment
Share on other sites

Hey @Cassie

 

thanks for the quick reply. I see that I didn’t do the tl, that was my quick mistake in trying to make the codepen, it was factored on tl within my animation. Because there is a lot of other things happening in the animation, I can’t simply use a repeat:1 on the tl, to get what I’m after, and when i refactor it for that, I get the problem again, (ie remove the repeat:1, and just simply have more lines of code in the tl. )

 

Link to comment
Share on other sites

1 minute ago, PointC said:

Hi @steve bartlett :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

I just wanted to point out that the first opacity tween isn't really doing much since the line is set to 0 length. You could set() the opacity to 1 at the beginning of the timeline to override the opacity in your CSS. Maybe something like this:

 


gsap
  .timeline({ defaults: { duration: 2 }, repeat: 1 })
  .set("#line", { opacity: 1 })
  .from("#line", { drawSVG: 0 })
  .to("#line", { opacity: 0 });

Happy tweening and welcome aboard.

:)

 

Oh that’s great thanks @PointC i didn’t see that’s how the draw works, because it’s .from it’s set the line to 0 anyway… that’s a great tip for my understanding of how its working

Link to comment
Share on other sites

thanks @OSUblake so it’s more that i didn’t understand the From tweens, rather than the drawsvg, that makes sense, i didn’t even think of that. appreciate the link to learn more! I also found that i got the best results when i placed an ID on every path i wanted to draw, and then used an array to animate them all with a single tween, it worked much more reliably that way, which is probably just good practice anyway! Thanks again!

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