[Three state button control]

4 hours ago, ZachSaucier said:

 

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).

 

[Three state button control]

4 hours ago, PointC said:

Did the demo I showed in your other thread not help you with this project?
 

 

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).

 

[Three state button control]

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?)

 

See the Pen VwmGwxo?editors=1011 by hanzek (@hanzek) on CodePen

[addEventListener works only on first click]

Thanks for quick solution.

And the example is perfect for my case.

 

Cheers!

[addEventListener works only on first click]

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

See the Pen VwmGwxo?editors=1111 by hanzek (@hanzek) on CodePen