buster808 Posted January 21, 2022 Share Posted January 21, 2022 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 More sharing options...
elegantseagulls Posted January 21, 2022 Share Posted January 21, 2022 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 3 1 Link to comment Share on other sites More sharing options...
Solution PointC Posted January 21, 2022 Solution Share Posted January 21, 2022 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. 4 1 Link to comment Share on other sites More sharing options...
buster808 Posted January 24, 2022 Author Share Posted January 24, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now