Why does the animation start?

[AlexanderGS 3 Likes (Newbie)]

Why does the animation run when the element is not in view of the browser window?

See the Pen GRBWXQO by Alexxxsander (@Alexxxsander) on CodePen

[akapowl 5,494 Likes (Superhero)]

 

42 minutes ago, AlexanderGS said:

Why does the animation run when the element is not in view of the browser window?

 

Because you can not access pseudo elements just like that via JavaScript (which probably is one of the reasons the CSSRulePlugin exists to begin with). You can try logging out 

 

document.querySelector('.line::before') // returns null

 

and you will see that it returns null .

 

So you can not use it as a trigger for your ScrollTrigger as it is invalid, and thus ST will likely default back to using the body as the trigger-element, which is why the animation play, because its top is past the bottom of the viewport already.

 

[AlexanderGS 3 Likes (Newbie)]

2 minutes ago, akapowl said:

 

 

Because you can not access pseudo elements just like that via JavaScript (which probably is one of the reasons the CSSRulePlugin exists to begin with). You can try logging out 

 

document.querySelector('.line::before') // returns null

 

and you will see that it returns null .

 

So you can not use it as a trigger for your ScrollTrigger as it is invalid, and thus ST will likely default back to using the body as the trigger-element, which is why the animation play, because its top is past the bottom of the viewport already.

 

OK, thank you. For some reason I thought the pseudo-elements would trigger as well.