[Synchronize tweens]

Hey Rodrigo,

 

Thanks for the detailed explanation and the sample code. Very much appreciated!!!

 

I'm working on familiarizing myself with 'position parameter'.

 

Once again, many thanks.

 

Zigii

 

[Synchronize tweens]

Hi,

 

I've cobbled this animation together using online tutorials and code and previous advice on this forum. Thanks for help so far.

 

I've got a SVG (the circular power saw) containing various parts that are individually animated (the rotating blade, and the saw body and blade together moving along x-axis (see codepen).

 

There's also some 'sawdust' which is dynamically generated and then appended to the 'g#sawdust' element  (thanks, Jack 😀).

 

This all seems to work fine except I cannot get the g#sawdust element to tween in synch with the saw body ( <g id="saw"> ) and blade ( <g id="blade"> ) when they tween to the right along x-axis.

 

I want the sawdust to begin animating along x-axis, starting at the point where the blade leaves the wood and following the blade until animation finishes.

 

It's set roughly in position with:

 

gsap.set(newRect, {
    attr: {
       x:450,
      y:545,

      ...

 

I think I  probably should be using the 'position parameter' (I've watched video and read through the notes) to synch tweens but I can't get the g#sawdust element to tween when it's part of the 'circularsaw' timeline:

 

This doesn't work:

 

let circularsaw = gsap.timeline();

    circularsaw.set("#saw, #blade", {x:-380})
    circularsaw.to("#saw, #blade", {x: 350, delay:2, duration: 1})
    circularsaw.to("#sawdust", {x:1000, delay:2, duration:2});

 

However, if the  #sawdust element is referenced outside of circularsaw timeline, it does tween - only now can't be synched to tween with #saw and #blade:

 

let circularsaw = gsap.timeline();

    circularsaw.set("#saw, #blade", {x:-380})
    circularsaw.to("#saw, #blade", {x: 350, delay:2, duration: 1})
       
    gsap.to("#sawdust", {x:1000, delay:2, duration:2});

 

Any advice appreciated.

 

 

 

 

 

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

[Dynamic SVG elements]

Thanks for the advice, @Jack.

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

Much appreciated.

[Dynamic SVG elements]

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

[SVG Animation]

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)",
    });

 

 

[SVG Animation]

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