Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
buster808

Adding function paramter in timeline

Go to solution Solved by PointC,

Recommended Posts

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.

Link to comment
Share on other sites

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

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • Solution

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.

:)

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×