Jump to content
Search Community

Animate array of paths

AdObeOne test
Moderator Tag

Go to solution Solved by AdObeOne,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Sorry about this basic question but I spent half a day trying to find the answer online.


I replicated the GreenSock DrawSVG example in my web development tool to learn the basics. The circle, rect, ellipse and polyline are animated using an array.

var shapes = $("circle, ellipse, rect, polyline");


Now I want to use paths instead to experiment with more complex shapes. How do I assign a path to an array?


Thanks in advance for your help.



Link to comment
Share on other sites

Based on the information you provided I can only guess that the answer would be

var shapes = $("circle, ellipse, rect, polyline, path");

However, I suspect you need something else, in which case a reduced CodePen demo would be most helpful. 

Please fork one of our demos and replace the SVG with the most basic code required to illustrate the issue. Thanks!

  • Like 1
Link to comment
Share on other sites

Hi there AdObeOne :),


You just need to assign an ID or a class name to you path(s). You can then add them your other elements that you are animating with DrawSVG.


If you have a look this Greensock CodePen: 

See the Pen jEEoyw by GreenSock (@GreenSock) on CodePen


you'll see that on line 10 of the JS there are multiple classes that are being drawn. Then have a look at the SVG and you'll see those class names assigned to several paths in the SVG.


I hope this helps.

  • Like 2
Link to comment
Share on other sites

  • Solution

Hello PointC and Carl. Thank you both for your reply.


To my great astonishment the code worked when I opened the file today. When I closed the files the last time it did not work. I tried using a class and using an ID for the path, but both did not work. And now, without changing a single character it works.


There's something fishy with DreamWeaver CC. It still complains that Greensock commands in a included javascript file are undefined. Although the code works just fine. Also I noticed that it temporally indicates that files are included of which the names are part of the names that really are included. When I close the html file and reopen it those erroneous files are no longer indicated as being included. Very strange. Time for an update by Adobe. But I guess they're to busy now fixing other products with the big El Capitan problem.

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