Jump to content
Search Community

Animating multiple pseudo elements based on different scrolltrigger events

rsheppard test
Moderator Tag

Recommended Posts

Hi guys,

 

I basically am designing a site with an animated underline using a :before pseudo element.

 

I've used CSSRulePlugin to select it and got it to work but is there anyway to make it work at different scrolltrigger events where ever I use the .underline class? At the moment all underlines are triggered as soon as the first is triggered.

 

I read about the gsap.utils.toArray() and then using a forEach method to treat each node as a seperate animation but it doesn't seem to work with pseudo elements. Is there any work around for this? Thanks in advance!

See the Pen BaZEQWx by rsheppard83 (@rsheppard83) on CodePen

Link to comment
Share on other sites

Welcome to forums @rsheppard

 

Animating a CSSRule will apply to all pseudo elements that use that rule. You should use CSS variables instead. Also, never use CSS transitions on properties that you are animating with GSAP. Using all, applies to all properties, so it will mess up your GSAP animations.

 

See the Pen bGRJgXp by GreenSock (@GreenSock) on CodePen

 

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Sorry to bother you guys again. I went with the css variable option but have one issue: When the sentence wraps to a new line the animation does not work. 

 

Do you know how I can make it work across multiple lines?

 

Appreciate any help

Link to comment
Share on other sites

I have no idea what's up with that. It's definitely not a GSAP issue because it has that issue if you remove GSAP and all the CSS vars from the equation. 🤷‍♂️

 

Maybe someone else here has a better way to make the pseudo element appear in a multiline text block.

Link to comment
Share on other sites

Pseudo elements are just an inline child of the selected element.

It has no idea that the text within the parent is spanning multiple lines and you want it to underline that text, it's just a box as far as it's concerned.

 

This is the best technique I've found so far to do multiline underlines Glad it helped!

  • Like 2
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...