Vertical timeLine with toggleClass on section (Wrong start end stop scroller)

[Sergey Rosinskiy]

Hello developers. There is a problem with starting and stopping a fixed ball. The ball should be fixed at a distance of 35% from the top and stop no lower than a point on the Timeline. The moment the ball is against a section it should receive an Active class (previous sections should be active as well). When scrolling back up, the Active class is removed one by one and the ball stops at the starting point (at any screen resolution).

 

I pasted a screenshot of the end point where the ball should stop.

See the Pen qBYLOLK by rasik (@rasik) on CodePen

[akapowl]

 

Hello Sergej, welcome to the forum.

 

43 minutes ago, Sergey Rosinskiy said:

There is a problem with starting and stopping a fixed ball. The ball should be fixed at a distance of 35% from the top and stop no lower than a point on the Timeline.

 

Looks like you forgot the leading dot on your endTrigger selector class

 

// bad
endTrigger: "timeline"

// better
endTrigger: ".timeline"

 

If you want to properly calculate where the end should be then for it to be center aligned with the end-dot (btw you've got the end porperty in there twice), you could e.g. do it something like this

 

end: "bottom-=24px 35%"

 

...where the 24px is the difference between the height of the .ball and the height of the dot you've got at the end of your line there (I believe it's a pseudo-element). Also; it's 24px here, because I set the height of the .ball to 32px instead of 31px just to have some value that is divisible by 2, so it actually looks centered in the end, too.

 

Hope that will help. Happy scrolling!

 

See the Pen ZEowexa by akapowl (@akapowl) on CodePen

 

[Sergey Rosinskiy]

Thank you for your help!  💪 And the quick response. It remains for me to translate everything to React, I hope in React similar structure

[akapowl]

You're very welcome!

 

If you run into problems implementing this in React and need help on that, best make sure to open a new thread for it then, so you catch the attention of the more React savvy people on this forum.

 

Good luck with the project!