Jump to content
Search Community

Efficient coding while using drawSVG plugin

Tom Roberts test
Moderator Tag

Recommended Posts

Hi All
I am creating an animation where I want a series of lines to draw in and then have other colours run along these lines at different intervals. Like pulses of electricity on an electrical circuit.

I have created a codepen to demonstrate what I am aiming for, but the way I am heading it will be a complex animation when I add all the other lines  to create the circuitboard. Is there a more efficient way of coding this animation?

 

I would also like to resolve the following issues:

Second and third 'pulse' should be a fixed length (not grow during animation) and should not be visible apart from when they are moving.

I have tried setting negative percentages and fixed lengths for the lines but then they seem to appear at either the start or the end of the animation again as they are currently showing.

 

Lastly, I would like the final line to appear in the opposite direction so it draws towards the bigger line...  How?

 

Thanks in advance,

 

Neil

See the Pen BazbWGQ by neilb1969 (@neilb1969) on CodePen

Link to comment
Share on other sites

  • Tom Roberts changed the title to Efficient coding while using drawSVG plugin

Hey Tom. Thanks for supporting GreenSock with a Business Green membership :) 

 

1 hour ago, Tom Roberts said:

Second and third 'pulse' should be a fixed length (not grow during animation) and should not be visible apart from when they are moving.

I have tried setting negative percentages and fixed lengths for the lines but then they seem to appear at either the start or the end of the animation again as they are currently showing.

A negative percentage for the start is the way to go. I would probably create a new SVG element for each line that you need to do this effect on and give that element the same color as background. Make sure that element is on top of the line segment. 

 

1 hour ago, Tom Roberts said:

I would like the final line to appear in the opposite direction so it draws towards the bigger line...  How?

You could either switch the direction of the line in your vector editor (Craig has a great post on that) or switch the values of the DrawSVG:

tl.fromTo(line4, {drawSVG:"100% 100%"}, {duration: 1, drawSVG:"0% 100%"}, "+=0.5")

 

1 hour ago, Tom Roberts said:

Is there a more efficient way of coding this animation?

What you have right now is pretty efficient for what is there. But if you have a bunch of similar elements and want to animate them in the same way then it'd probably be a good idea to use functions/loops. I write more about that in my article about animating efficiently.

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