rsheppard Posted October 1, 2021 Share Posted October 1, 2021 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 More sharing options...
PointC Posted October 1, 2021 Share Posted October 1, 2021 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. 3 2 Link to comment Share on other sites More sharing options...
OSUblake Posted October 1, 2021 Share Posted October 1, 2021 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 5 1 Link to comment Share on other sites More sharing options...
PointC Posted October 1, 2021 Share Posted October 1, 2021 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. 2 Link to comment Share on other sites More sharing options...
OSUblake Posted October 1, 2021 Share Posted October 1, 2021 Lol. CSS variables are the coolest thing ever! Link to comment Share on other sites More sharing options...
rsheppard Posted October 1, 2021 Author Share Posted October 1, 2021 Thank you very much this is exactly what I needed 😊 1 Link to comment Share on other sites More sharing options...
rsheppard Posted October 4, 2021 Author Share Posted October 4, 2021 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 More sharing options...
OSUblake Posted October 4, 2021 Share Posted October 4, 2021 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 More sharing options...
Cassie Posted October 4, 2021 Share Posted October 4, 2021 Did someone say multiline spanning animated underline? (CSS but easily swopped over) See the Pen rNNGdmw by cassie-codes (@cassie-codes) on CodePen 3 1 Link to comment Share on other sites More sharing options...
OSUblake Posted October 4, 2021 Share Posted October 4, 2021 Yesssss, that seems to work! Do you know why the pseudo element doesn't display correctly? Link to comment Share on other sites More sharing options...
PointC Posted October 4, 2021 Share Posted October 4, 2021 @Cassie wanders into the thread. 3 Link to comment Share on other sites More sharing options...
rsheppard Posted October 4, 2021 Author Share Posted October 4, 2021 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! 1 Link to comment Share on other sites More sharing options...
Cassie Posted October 4, 2021 Share Posted October 4, 2021 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now