SVG to move with multiple buttons

[Recordmr]

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

See the Pen XOxppQ by recordmr86 (@recordmr86) on CodePen

[GreenSock]

Welcome to the forums, @Recordmr. I read your post a few times and glanced at your codepen (thanks for providing one), but I'm kinda lost about what you're asking. What are you sliding? I don't see anything moving, nor do I even see any of the SVG visible. Can you boil it down a bit more and be clear about what should be happening in the codepen (with as little code/extra stuff as possible)? We'd love to help with any GSAP-specific questions. 

[Recordmr]

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

 

 

[GreenSock]

Ah, okay. Yeah, there was no width or height on the SVG, so it collapsed in Chrome.

 

I think you're overcomplicating things. It should be as simple as: 

var roots = '.cls-5';

$('#f_button').click(function() {
  TweenMax.to(roots, 0.2, {x:0});
});
$('#g_button').click(function() {
  TweenMax.to(roots, 0.2, {x:400});
});
$('#a_button').click(function() {
  TweenMax.to(roots, 0.2, {x:800});
});

 

Here's a fork: 

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

 

You could even make it simpler by leveraging naming conventions or data attributes in the HTML, but I don't want to confuse things by adding another approach here.

 

Oh, and you were loading TweenLite twice, plus a bunch of other files that aren't necessary. TweenMax already has TweenLite and TimelineLite inside of it. All you need to do is load that one file and you're golden. 

 

Does that help? 

 

[Rodrigo]

Hi,

 

Unfortunately SVG is not my strongest suit, but I managed to make something like that with just HTML markup and is also responsive using Bootstrap:

 

See the Pen jdQJyG by rhernando (@rhernando) on CodePen

 

As you can see my approach is to record the size and position of each fret on init. Store the chords data in an object and then when the chord is selected use the frets data to position the dots.

 

Hopefully this helps you get things going.

 

Happy Tweening!!

[GreenSock]

Well done, @Rodrigo!

[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