Jump to content



Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?



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

Link to comment
Share on other sites

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


  • Like 2
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.