Jump to content
GreenSock

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

SplitText how to avoid text inside buttons

Go to solution Solved by GreenSock,

Recommended Posts

Hey guys, I'm using SplitText plugin to show like a typing animation, the problem is that sometimes I have buttons inside the paragraph and the plugin is also typing those character when I don't need the text inside the buttons to have that animation.

 

It's there a way to get avoid that text to be splited?

 

I try several techniques, one was to remove the paragraph with the buttons outside of the SplitText animation, the problem there is that I need the movement to the next line

See the Pen bGWNVbY?editors=1010 by godhandkiller (@godhandkiller) on CodePen

Link to comment
Share on other sites

What if you just adjusted your selector?:

let dynamicText = gsap.utils.toArray("#insights-shipping-text .border");

 

  • Like 1
Link to comment
Share on other sites

@GreenSock The border class is there just for testing purposes. I can add a class to the paragraph that has the button on my real case project but I can't a class for every paragraph that doesn't have a button

Link to comment
Share on other sites

  • Solution

Sure, the point was just to craft your selection to properly focus on the elements you want to split, that's all. Are you asking how to select the paragraphs that don't contain a certain class? And you said you can't control what classes are applied to the paragraphs, right? 

 

Maybe: 

let dynamicText = gsap.utils.toArray("#insights-shipping-text p:not(.flex)");

 

  • Like 1
Link to comment
Share on other sites

On 7/14/2021 at 7:21 PM, GreenSock said:

Sure, the point was just to craft your selection to properly focus on the elements you want to split, that's all. Are you asking how to select the paragraphs that don't contain a certain class? And you said you can't control what classes are applied to the paragraphs, right? 

 

Maybe: 


let dynamicText = gsap.utils.toArray("#insights-shipping-text p:not(.flex)");

 

Thank you for the answer, It was actually more complicated than using just the selector (just how the project is setup) but this give me the main idea of how to do it

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