Jump to content
Search Community

Why does the animation start?

AlexanderGS test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

  • Solution

 

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.

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...