Jump to content
Search Community

Zigii

Members
  • Posts

    6
  • Joined

  • Last visited

Community Answers

  1. Zigii's post in SVG Animation was marked as the answer   
    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)",
        });
     
     
×
×
  • Create New...