How to fix the reverse animation of circle dots using scrolltrigger?

[gsapmonkey]

Hi,

I am just starting on gsap from last few weeks. I have a simple animation, I am trying to figure out from last few days. I have a circle and dots on the circle radius. Requirement is to scale the dots when the screen enters the section and when the user scrolls each dot should get a border indicating different content (which means a text change and image change).

 

The issue I am facing is the borders around circle are able to appear correctly when scrolling down. But when scrolling up, the borders around the dots are not disappearing correctly. Only 3 dots out of 5 disappear when it reaches the first content, where 4 should disappear. I am not sure if I am having the right approach. Any help in the right directly is greatly appreciated. thanks in advance!

 

Codepen attached.

 

See the Pen ExJgRqb by codingchefs (@codingchefs) on CodePen

[GreenSock]

That's a very inefficient way of running that logic. Are you trying to do this?: 

See the Pen yLraRBd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

That'll play/reverse the animations when that particular spot on the scroll is hit. But if you want it to be scrubbed instead, you could do that too very easily: 

See the Pen YzMGJzx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Lots of options! 

[gsapmonkey]

Thank you so much for the response. Dint know I can do that way. I may have to change my approach a little bit here as I need to connect this to a vertical scrollbar. Really appreciate the help.