Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rsheppard

Animating multiple pseudo elements based on different scrolltrigger events

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

Hi @rsheppard :)

 

Welcome to the forum.

 

I don't think that'll work correctly since you're targeting the rule. I'd probably just loop through and add some real DOM elements. 

 

See the Pen 37cfe9e3ace3288e866a771c96526fcf by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 3
  • Thanks 1
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 4
  • Thanks 1
Link to comment
Share on other sites

Ha. I knew you were gonna post a solution with CSS variables - that's why I went with the real DOM elements. Gotta have options. ;)

  • Haha 2
Link to comment
Share on other sites

Lol. CSS variables are the coolest thing ever!

Link to comment
Share on other sites

Thank you very much this is exactly what I needed 😊 

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

Did someone say multiline spanning animated underline? (CSS but easily swopped over)

See the Pen rNNGdmw by cassie-codes (@cassie-codes) on CodePen

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

Yesssss, that seems to work!

 

Do you know why the pseudo element doesn't display correctly?

 

Link to comment
Share on other sites

@Cassie wanders into the thread.

 

giphy.gif

  • Haha 3
Link to comment
Share on other sites

Thanks Cassie! Im confident I can fork this to work with my current code base.

 

I struggled with this for ages before posting here. This is a really helpful forum!

  • Like 1
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.
×