Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
NickNo

Adding multiple (same) element animations to a SVG

Recommended Posts

So, I've got a SVG image of a landscape which will have a bunch of different animations happening in the background. One of these is a group of about 5-6 cows with flicking tails. These are all exactly the same, but with staggered tail flicks ..my question is - is the best approach here to just have separate cows in the html, all with different IDs (and tail IDs) and separate timeline functions for each - or is there a smarter way to approach it??  Thanks in advance for any suggestions :)

See the Pen RwrRzBG by nickjacobsnz (@nickjacobsnz) on CodePen

Share this post


Link to post
Share on other sites

Hey @NickNo,

 

The SVG <use> element can reuse an SVG shape from elsewhere in the SVG document, including <g> elements and <symbol> elements. The reused shape can be defined inside the <defs> element (which makes the shape invisible until used) or outside. More here

 

See the Pen XWXjWGw?editors=1000 by mikeK (@mikeK) on CodePen

 

And then create a loop to stagger the tails.

 

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

 

Happy tweening ...

Mikel

  • Like 2

Share this post


Link to post
Share on other sites

Mikel's approach is the right way but I don't suggest using <use> if you're worried about performance. Animating individual paths (that share a class so they're easy to select) will perform better. For more about SVG performance check out this post. For more about how to structure animations efficiently, I highly recommend my article on the subject.

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

Hey Zach,

 

Good point.

 

Because it is fun ...

 

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

 

Happy tweening ...

Mikel

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

That’s awesome thanks for the suggestions...

  • Like 1

Share this post


Link to post
Share on other sites

That’s a really useful article thanks @ZachSaucier, immediately applicable to what I’m working on and will solve a few problems I had anticipated :)

  • Like 1

Share this post


Link to post
Share on other sites

Hey fellas, I'm checking out Zach's article and I can't quite land on the code that actually replaces the <use> for cloning the same svg.  The closest thing I can find is the Physics Utility code here:

// create 80 dot elements and put them in an array
for (i = 0; i < 80; i++) {
    dot = document.createElement("div");
    dot.setAttribute("class", "dot");
    bg.appendChild(dot);
    dots.push(dot);
}

I'm sure it's a classic case of newbie-itis.

Share this post


Link to post
Share on other sites

I'd just use a vector editor to copy the paths and move them to where you need them to be. You could clone the actual SVG objects with JS but why? The more that you can do on the frontend/prep side the better :) 

  • Thanks 1

Share this post


Link to post
Share on other sites

It depends on how many elements we're talking about here. If it's just a few copies, I'd echo Zach's advice and prep your artwork in your vector software. If you have hundreds of elements, cloning is one way to go. Here's a simple clone loop.

See the Pen 24b436be30b10bd6fc5b840c913b9db6 by PointC (@PointC) on CodePen

 

Or you can create everything on the fly. Here's that option.

See the Pen ac3cac6818d6711f183884373e20fc6b by PointC (@PointC) on CodePen

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

@ZachSaucier  I understand. I am creating custom illustrations in Adobe Illustrator. I have created a few different leaves, each ranging from 4k-7k, to compose a lush nature background.  That "k" can add up quick with these more complex paths. 

Overall, where you draw the line in the sand to prep artwork vs. use javascript must be on a case-by-case basis, I imagine. I'm also walking a tight-rope between SVGs and resolution-based graphics (or video).

@PointC  Thank you for the javascript suggestion. I will give that a try. 

Thank you for the support fellas! Much appreciated
 

Share this post


Link to post
Share on other sites
1 hour ago, Yaya said:

I have created a few different leaves, each ranging from 4k-7k, to compose a lush nature background.  That "k" can add up quick with these more complex paths.

 

Are you speaking of size or volume? If volume then that seems like it would be an excessive amount of elements regarding SVG and performance, Canvas, Pixi, WebGL, etc., would be better options when hitting those volumes. There was a similar thread regarding SVG Performance a while back regarding trees, leaves.

  • Thanks 1

Share this post


Link to post
Share on other sites
4 hours ago, Shrug ¯\_(ツ)_/¯ said:

Are you speaking of size or volume?

I was gonna ask the same thing. Are we talking about thousands of SVG paths here? If so, you could also just use an image for something like that as it might be a tad sluggish performance wise. 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

@Shrug ¯\_(ツ)_/¯

Quote

Are you speaking of size or volume?

Size of the file itself. When I am in file manager and check the size of 1 svg. Thanks for the link to the trees example; there were some morsels of good info there.

@craig

Quote

 Are we talking about thousands of SVG paths here?

Not thousands of paths. I decided to limit the number of SVGs and use a jpg behind them to imply "lushness". I plan to post a codepen.

Share this post


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

×