Speed/Meter need help to work as items.

[buster808]

Hi

I want create lots of Speed/Meter's with seperate speeds and have animation sync.  (I used code from https://www.motiontricks.com/svg-skill-level-meter/ to get started with scrolltrigger)

 

Ive created two speed dials one is at 1140 and the dial and mask ring is full.

The second won is at 600 and I can set the dial but need help with setting the mask ring so it stays with the dial.

 

Im sure theres a way of doing this with code so I can set the number say 700 and the animation happens via an overall percentage of say 1140.

 

Thanks for any help.

See the Pen gOGJLyg by buster808 (@buster808) on CodePen

[PointC]

Hi @buster808 

 

Thanks for reading Motion Tricks. Glad to see you're having some fun with meters.

 

In this case I think measuring the length of the path and tweening to an absolute length would be the easiest approach. I've forked your pen with a couple small changes. If we get the desired percentage by dividing your target count (600) by the hard coded max of 1140 and then multiply that by the max rotation of 180 you get the needle rotation. Multiplying that same percentage times the length of path we're drawing and you'll get the target length. Use those values in the tween and you'll get this.

 

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

 

I'd also recommend using a function to create everything since the dials are the same. Then just feed in the desired count and you'll be good to go. Hopefully this all makes sense. Happy tweening.

 

[elegantseagulls]

I think your best bet for this would be to use a forEach loop for each dial, then and set your values/math to figure out rotation etc using data-attributes or similar. For the mask-ring drawSVG, you'll probably want to use a .fromTo(maskRing,  { drawSVG: 0 }, { drawSVG: `${(600 / 1140) * 100}%` }) and rotation: (600 / 1140) * 180  or something similar.