Hi,
I am trying to have a row of dots sequentially change with a small delay (between each dot changing) but am having trouble. This is what I have so far:
https://codesandbox.io/s/optimistic-smoke-qlv2i?file=/src/components/Dots.js
What I want to happen is:
The first dot (left to right) to always be active. WORKING When another dot is clicked then the dots between it activate sequentially with a small delay until the clicked dot lights up last. NOT WORKING – The clicked dot activates first and the ones in between don’t activate sequentially.
If a previous dot it clicked then the dots after it to deactivate sequentially (from right to left) until they get to it but it remains active. NOT WORKING – The clicked one remains active but the ones in between seem to deactivate together not sequentially. Ideally, any unactivated dots will scale to activated size on hover without activating. NOT WORKING but I know why and could probably figure it out after fixing everything else.
As you can see, what I have done kind of works but not really that well. I think I can figure out the hover but the real issue is the sequence and timing which I m stumped on :/
I am not even sure if this is even the best approach to this and really would appreciate some help please?
Thank you in advance
submitted by /u/fujisan0388
[link] [comments]