Zigii

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

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.

Thanks for the advice, @Jack. I wouldn't have worked that out on my own. Much appreciated.

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.

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

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). https://codepen.io/Ben10/pen/RwyraEv 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: https://codepen.io/Ben10/pen/LYmGZPJ 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.