SVG Animation

[Zigii]

Hi,

I'm new to SVGs but trying to get a rough animation of a circular saw up and running.

I've read a few GSAP tutorials and guides and have managed to set up a SVG drawing of a saw with spinning blade 😃:

 

(See spinning saw blade below).

 

 

My problem is I also want to try to extend this animation by emulating sawdust spitting out of saw as it 'cuts' the wood.

 

Using some GSAP code from a tutorial I've got the following 'sawdust' animation:

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

 

But now I have hit a brick wall because I can't integrate the 'sawdust' animation with the 'circular saw' animation.

 

The 'sawdust' code uses a 'source' div which I thought I might be able to incorporate into the SVG but this doesn't seem to work.

 

Probably I have gone about this all the wrong way.

 

Hoping someone can point me in the right direction.

 

Thanks.

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

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Why not create the particles in the SVG? it doesn't seem to create a performance issue:

See the Pen ExLPWxJ?editors=0010 by rhernando (@rhernando) on CodePen

 

Trying to line-up correctly the SVG and the DIV with the particles could become a bit complicated, so I'd try to exhaust every possibility of using just SVG for this.

 

Happy Tweening!!!

[GreenSock]

11 hours ago, Rodrigo said:

Trying to line-up correctly the SVG and the DIV with the particles could become a bit complicated, so I'd try to exhaust every possibility of using just SVG for this.

I agree. Putting them in the same SVG is almost surely the simplest solution. But if you really need to line up separate things (stuff not in the same <svg>), these methods make it relatively simple to do it: 

https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition()

https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates()

 

Good luck!

[Zigii]

Thanks for advice, @Jack and @Rodrigo

 

I found the following code (below) which solved my problem.

 

It creates a series of SVG rectangles dynamically (my 'sawdust') and appends these to the main SVG (the circular saw), making alignment pretty much a breeze.

 

All sorted.

 

const svgns = "http://www.w3.org/2000/svg";
const demo = document.querySelector("#demo");

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

  gsap.set(newRect, {
    attr: {
      x:100,
      y:425,
      width: "random(10, 20)",
      height:  "random(10, 30)",
      fill: "random([#000000, #A9A9A9, #d3d3d3, #C0C0C0, #B2BEB5, #708090])"
    }
  });
  
  gsap.to(newRect, {
        duration: 2,
        opacity:0,
        physics2D: {
            velocity: "random(200, 650)",
            angle: "random(250, 255)",
            gravity: 300
        },
        delay: "random(0, 2.5)",
    });