Synchronize tweens

[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.

 

 

 

 

 

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

[Rodrigo]

Hi,

 

There are basically two problems. You're creating the particles animations before the animation even starts and you are using just delays. Don't worry about not completely getting the position parameter, since is not really simple and takes fiddling with a lot of timelines to completely grasp the concept.

 

One of the solutions that I can think of is to store your dust animations in an array and then add that array to the main timeline in order to control the entire animation with just one timeline. This seems to work:

const dustTweens = []; // Array for the dust tweens

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

  gsap.set(newRect, {
    attr: {
      x: 450,
      y: 545,
      opacity: 0.5,
      width: "random(10, 20)",
      height: "random(10, 20)",
      fill: "random([#E1C16E, #CD7F32, #C19A6B, #B87333, #F0E68C, #D2B48C])"
    }
  });

  dustTweens.push(gsap.to(newRect, {
    duration: 1,
    opacity: 0,
    physics2D: {
      velocity: "random(200, 1000)",
      angle: "random(250, 260)",
      gravity: 300
    },
    delay: "random(0, 4)",
  }));
}

//MOVE SAW
let circularsaw = gsap.timeline();
circularsaw
  .set("#saw, #blade", { x: -380 })
  .to("#saw, #blade", { x: 350, delay: 2, duration: 1 })
  //MOVE SAWDUST
  .to("#sawdust", {x:1000, duration: 1}, "<")
  .add(dustTweens, "<");

As you can see I'm using the less than symbol. This as the position parameter tells GSAP to add the instance when the previous one starts. So that basically adds the movement of the dust and the particles flying around at the same position of the previous one. First we set some positions, then we move the saw and the blade, then we add the sawdust container and tell GSAP "<": add this when the previous instance starts, so that adds the movement of the sawdust when the movement of the saw starts. Since they have the same duration and ease they are in perfect sync. Then we add the array of dust particles animations and we use "<" again, so GSAP adds that array when the previous animation starts. That is when the motion of the dust container starts, which is also when the motion of the saw starts as well. So basically all these animations are starting at the same time, so everything works in sync.

 

Hopefully this clarifies things a bit more.

 

Happy Tweening!

[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