Jump to content


GSAP Splittext won't include :before element in the animation

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

As can be seen in the Codepen. The <li> elements are being animated via the Splittext and they have a :before element but that's not being animated as part of the text. Any idea how to include it in the animation?


On a side note, things get even more weird when the piece of code below is excluded.

ul li {
  display: flex;


See the Pen mdpzJrB by fuad-zeyad-tareq (@fuad-zeyad-tareq) on CodePen

Link to comment
Share on other sites

  • Solution

Pseudo elements are not accessible in the DOM. In other words, they're completely unreachable by JavaScript. 

  • Like 4
Link to comment
Share on other sites

Ah! Well that explains my failed attempts at animating them.


Seriously though, pseudo elements have been out for how long now?! Lol

Link to comment
Share on other sites

Yeah, I don't think it's a matter of them being new - I think the browsers never planned on making them accessible since they're not "real" DOM elements 🤷‍♂️

Link to comment
Share on other sites

Yeah I think you're right. Seems shortsighted though as it leaves this random huge limitation given how far we've come now.


Thanks for the quick response anyhow. Saved me from wasting my time trying to animate these lol

Link to comment
Share on other sites

Not to contradict Jack, für all intents and purposes it it true that accessing pseudo Elements with JavaScript is not possible.

I found myself in a situation some time ago, where I had a very specific use case an I worked with window.getComputedStyle(element, ':before') to get the content and some other properties. In my case i was able to recreate the pseudo-element in a regular child element, place it while setting the original to invisible.


It was a hacky thing, as I wasn't able/supposed to rework the original HTML-output and it worked under the given conditions but might not work under others - at lest not in an acceptable way. 


In your case ist seems to me that It might not unworkable, but there are likely better solutions.

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