Creating an SVG in JS, then Animating it.

[Anthony_McEvilly]

Hi all,
Been using GSAP and loving it.
Just looking for some assistance.
(Please ignore the dirty code, just made it quickly)
I am after using the Timeline to animate an SVG that is created from a function within the Timeline.

 This code justfails as It cannot find the SVG ID even after the SVG has been created and added to the DOM:
tl.from("#p" + count, { drawSVG: "0%", stagger: 0.1, duration: 1 }, "<+1");

This might not be the best approach to what I am after.
But it is the only one i can think of to suit the current project.

Any assistance you be much appreciated 

Thanks
Anthony

See the Pen vYQbzdV by Anthony_ESM (@Anthony_ESM) on CodePen

[Rodrigo]

Hi,

 

There are two issues in your code. The first one is that when the Timeline is created (regardless if it's paused or not) GSAP will look for those elements in order to handle things internally. When a child instance from a timeline runs it doesn't look for the target element when it runs (it would be extremely bad for performance, so at that point those elements are not there.

 

The second issue has to do with the selectors you are using:

let cd = {
  plays: [
    { play_id: "1", startx: "0", endx: "100" },
    { play_id: "3", startx: "25", endx: "30" }
  ]
};
let count = 0;

cd.plays.forEach((play) => {
  tl.call(makePlayItem, [count], "<");
  tl.from("#p" + count, { drawSVG: "0%", stagger: 0.1, duration: 1 }, "<+1");
  tl.set({}, {}, "<+0.5");
  count++;
});

You are using p+count but the count goes from 0 to 1 and the ids you are using are 1 and 3, so one of those elements never gets selected by GSAP. On top of that those are the IDs of the SVG tags. The DrawSVG Plugin works on the <path> elements not the SVG main tag.

 

This seems to work the way you intend:

var tl = gsap.timeline({
  defaults: {
    ease: "none",
  },
  paused: true,
});
let cd = {
  plays: [
    { play_id: "1", startx: "0", endx: "100" },
    { play_id: "3", startx: "25", endx: "30" }
  ]
};
let count = 0;

cd.plays.forEach((play) => {
  makePlayItem(count);
  tl.from("#p" + play.play_id + " path", { drawSVG: "0%", duration: 1 }, "<+1");
  tl.set({}, {}, "<+0.5");
  count++;
});

tl.play();

Finally I'd strongly recommend you to check the docs for the DrawSVG Plugin in order to get a better grasp of how it works:

https://greensock.com/docs/v3/Plugins/DrawSVGPlugin

 

Hopefully this helps.

Happy Tweening!

[Anthony_McEvilly]

Thank you, I did just type it up very quickly.
But well spotted.
Your 100% right that the object must exist before making the Timeline.
I suppose I could append a new timeline after object creation and add it to the existing timeline.
But I am going the right direction.
Thanks again