Dynamic SVG elements

[Zigii]

Trying to create some dynamic SVG elements and then tween them.  I've got it partially working but now I've hit a brick wall.

 

I'm using the following code (see Codepen):

 

let circularsaw = gsap.timeline();

circularsaw.set("#saw, #blade", {x:-600});

circularsaw.to("#saw, #blade", {x: 200, delay:0.1, duration: 1});

circularsaw.fromTo("#blade",{
      rotation: 0
    },

{
      rotation: 360,
      duration: 1,
      repeat: -1,
      transformOrigin:"50% 50%",
      ease: "linear"
    },0);
    
circularsaw.addPause("#blade");
    
//SAWDUST
 
const svgns = "http://www.w3.org/2000/svg";
const demo = document.querySelector("#demo");

for (let i = 0; i < 100; i++) {
  let newRect = document.createElementNS(svgns, "rect");
  demo.appendChild(newRect);

 

//SET INITIAL ATTRIBUTES

 

  gsap.set(newRect, {
    attr: {
    x:360,
      y:550,
       width: "random(15, 50)",
      height:  "random(15, 30)",
      fill: "random([#E1C16E, #CD7F32, #C19A6B, #B87333, #F0E68C, #D2B48C])"
    }
  });
  

//TWEEN SAWDUST TO FOLLOW SAW

 gsap.to(newRect, {
        duration: 2,
        x:900,
        opacity:0,
        physics2D: {
            velocity: "random(200, 800)",
            angle: "random(250, 260)",
            gravity: 300
        },
        //delay: "random(0, 2.5)",
        });
    
}

 

The creation of dynamic SVG elements works fine and I can set the initial attributes (see:   gsap.set(newRect, {  section in code above).

 

However, once they are placed in position, I can't get the dynamic elements to then animate or, in other words, follow the movement of the saw using:
 

 gsap.to(newRect, {
        duration: 2,
        x:900,

 

(see code above)

I've read through the Animating SVG with GSAP page and also:

 

https://www.motiontricks.com/creating-dynamic-svg-elements-with-javascript/

 

but can't get it to work.

 

Hoping someone can point out where I've gone wrong in the code I'm using.

Thanks.

See the Pen VwxjxwN by Ben10 (@Ben10) on CodePen

[GreenSock]

That's because the physics plugin stuff you're doing is directly affecting the x/y values while at the SAME TIME you're also trying to have the tween animate the "x". You can't have it animating x to two different values. 

 

I see two options: 

1. Put your dust into a <g> wrapper and animate the "x" of that. So all the rects will animate their physics inside that group, and you animate the entire group (<g>) as a whole. 
2. [hack] change x: 900 to attr: {x:900} so that you're literally animating the "x" attribute while the physics is animating the transform.

[Zigii]

Thanks for the advice, @Jack.

I wouldn't have worked that out on my own.

Much appreciated.