Adding function paramter in timeline

[buster808]

Hi,

I have function below and want to add the function to timeline and be-able to change count parameter so can create seperate items. have tried numerous things but stuck. 

 

function dialcalc() {

console.clear();
 const count = 600;
  const targetPercentage = count / 1140;
  newRotation = targetPercentage * 180;
  drawTarget = DrawSVGPlugin.getLength(".maskRingTwo") * targetPercentage;

}

 

gsap
  .timeline({
    scrollTrigger: {
      trigger: "#fastdial",
      toggleActions: "restart none none reset"
    }
  })

  .fromTo(".maskRingTwo", { drawSVG: 0 }, { duration: 4, drawSVG: drawTarget })
  .to(".needleTwo",{ duration: 4, rotation: newRotation, svgOrigin: "225 200" },0);

 

Thanks for any help or even a tutorial.

[elegantseagulls]

Hi @buster808,

 

Remember adding a codepen demo really helps us out:

 

 

I think you're probably looking for the onUpdate callback https://greensock.com/docs/v3/GSAP/Tween

This old pen I just converted to GSAP3 syntax may help:

See the Pen BRggLa?editors=0010 by ryan_labar (@ryan_labar) on CodePen

 

Here's a very basic forEach loop that I mentioned in your other thread that gets values that you may find helpful as well:

See the Pen GRMbPGX?editors=1111 by ryan_labar (@ryan_labar) on CodePen

 

Could be useful too: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

[PointC]

Hi @buster808 

 

Looks like you're stuck with the meters. Here's a fork of your demo in which I used a forEach loop to make the animations and add a ScrollTrigger to each one. I think it should get you moving in the right direction. I used a small array for the dial values, but you can also use data attributes as @elegantseagulls mentioned above. Lots of ways to make it happen. 

 

See the Pen gOGNEOr by PointC (@PointC) on CodePen

 

Happy tweening and thanks for reading Motion Tricks.

 

[buster808]

On 1/21/2022 at 5:55 PM, PointC said:

Hi @buster808 

 

Looks like you're stuck with the meters. Here's a fork of your demo in which I used a forEach loop to make the animations and add a ScrollTrigger to each one. I think it should get you moving in the right direction. I used a small array for the dial values, but you can also use data attributes as @elegantseagulls mentioned above. Lots of ways to make it happen. 

 

 

 

 

Happy tweening and thanks for reading Motion Tricks.

 

Hi Craig really appreciate this, great code to understand how to loop svgs and using array for data. I went through your master.add starwars tutorial recently - excellent.