girro

Thanks Zach, this solves my problem. Thans for the notes also. But I still don't understand why in my example the starting point of the slider would always be initial value (1st button), and in your example it starts from current position (neither of us specified starting position of the slider). Does this have something to do with your events being closed in functions? Because more or less timelines in my and your example are not that different (minus some of my beginner mistakes).

I didn't know how to translate html logic to svg element. Here in the example, when you select all <li> elements, you get offsetLeft and width values, and move .slider accordingly. In SVG I didn't know how to select proper element since I needed to select whole group of elements (paths in a group), and the group doesn't have specific width (to automatically reposition .slider element).

After watching several hours of tutorials I didn't find answer for my example. I have a simple timeline for every button with click event attached to every button also. Animation of the buttons is fine. But animation of "marker" or "slider" that travels x distance to reach clicked button does not start from current position (unless you always click between 1st and 3rd button). So if, for example, you click on 2nd button, and after that you click on 3rd button the transition of "marker" element won't happen from 2nd to 3rd button but instead from 1st button to 3rd button. I thought that using .to will make animation of target element from current state to desired state (in this case movement on x axis). What am I doing wrong? Also - after "marker" moves from certain button to another button, the color of the letters on the button should change but I don't know how to target specific button, how to know which button was "active" before clicking another button. (I solved this with a trick I saw somewhere - turn all colors to be the same and just change color of the new active button - but what if I want more control over button that was active before?)

Thanks for quick solution. And the example is perfect for my case. Cheers!

Hello all! I'm a beginner in all web related fields and this is my first try with javascript animation. I've spent couple of hours trying to find out if the problem is in my GSAP timelines or my poor javascript skills, but I can't get animation to repeat on second mouse click. Thanks, Girro