Start timeline after svg wrapper get class

[marko krstic]

I'm adding class with jQuery on div after scroll. Inside that I'm having SVG.

I would like to trigger animation after I get class animate-now on scroll. 

Anyone can help me with that one?

See the Pen ydbgJP by krstivoja (@krstivoja) on CodePen

[mikel]

Hi @marko krstic,

 

Really not easy to understand what you want to achieve.

Here is a scrollMagic version with waves as a suggestion:

 

See the Pen dLLQYX by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[PointC]

Yeah, I'm a bit confused too. Adding a class after you scroll to a certain point wont work because you've already created the animation when everything loaded. You'd need to call a function to create the tween when you hit the 100 pixel trigger. You're also trying to remove the class when you scroll back up so is the animation supposed to stop at that point? I'm just not sure what the goal is here.

 

I think using something like ScrollMagic (like @mikel's demo) is probably the easier option here.

 

If you could provide more details, we can better assist you.

 

Happy tweening.

[marko krstic]

Thanks @mikel, @PointC Will try with scroll magic! Totally forgot about it