在滚动时，当元素垂直居中时添加内联CSS

Question

I have an SVG with CSS animated elements. Using animation-play-state I am keeping them at paused, with jQuery or JavaScript I would like to change that to running only once the SVG has been centred vertically on scroll.

My idea was to grab the class .paused which keeps them all paused and overwrite it with the aforementioned inline CSS.

Answer 1

You could achieve your requirement by adding two different css classes.

.classA_animate{
   animation: animation_1 2s linear infinite;
}

Once you have reached a scroll location remove classA_animate and add classB_animate

.classB_animate{
   animation: animation_2 2s linear infinite;
}