Jump to content
Search Community

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

Chromium test
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

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.
×
×
  • Create New...