guage

[KevinJ]

Hi All,

 

I'm trying to create a gauge (of sorts). It has 3 sections, each having three markers. The current (red) marker, a low (left grey) and high marker (right grey).

Each marker will relate to a number in a range (I would like to connect to DB later on).

When a group is clicked, all the markers will animate to a changed position (based on a different number).

 

How difficult easy is this to do with gsap?

 

KJ

See the Pen JMPxwm by kjames (@kjames) on CodePen

[Carl]

Thanks for the demo.

GSAP is definitely your best bet for the animation.

I looked at your SVG and it looks like you have lots of pre-existing transformations applied to the markers.

I would suggest you design your SVG with all the markers having no rotation at all and let GSAP set and animate the rotation.

It will be easiest too if you give each marker a transformOrigin based on a common point in the SVG coordinate system.

With GSAP we use svgOrigin: https://greensock.com/svg-tips#svgOrigin

 

In the demo below I use a 1-second delay on each animation so you can see that the SVG was designed with each marker having 0 rotation and living in the same spot.

 

 

See the Pen PEYvYV by GreenSock (@GreenSock) on CodePen