Recordmr

Wow, thank you both. That is exactly what I want to do. I learned so much from both replies and will study your code @Rodrigo

I'm sorry. The svg only seems to display on desktop(firefox) for some reason. I made a quick video of me making the svg move. You can view it here. So, basically when I press a button such as G, I want the red dots to shift from the current position to G which would be x="400". (to move 1 fret is 200). But, what if it is already on A and I press the button for G, how can I tell it to move back from "800" to "400", or from Bflat which would be "900". I want the script to check where the dots are and move it from there to the button that is pressed. Thanks

Hi, I am trying to use timelines to animate an svg element to slide to different points. When a button is clicked I need it to slide to a certain place on the x axis, then when another button is clicked, I need the element to slide from where it is to the x value associated with the next button pressed. If you know anything about guitar, I will put it this way: I want to display root notes (the red dots) and I need them to change position when a user clicks on the corresponding button. I have to do this for the 12 Major Keys. For example, the key of A starts on fret 5, so when the A button is clicked, the red dots should always move to that position no matter where it is. It is not so troublesome when only doing two keys but when there are multiple buttons, I'm not sure how to set it up. I'm sure I am way off....should I be using If Then conditions? Something else? Thanks for your help