Jump to content
Search Community

Speed/Meter need help to work as items.

buster808 test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts


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

Link to comment
Share on other sites

  • Solution

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.



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

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.

  • Like 4
  • Thanks 1
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.
  • Create New...