buster808 Posted January 19, 2022 Share Posted January 19, 2022 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 Link to comment Share on other sites More sharing options...
Solution PointC Posted January 19, 2022 Solution Share Posted January 19, 2022 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. 5 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 19, 2022 Share Posted January 19, 2022 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. 4 1 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