splittext Font color changing with splittext

[heckspoiler]

I have splittext and somehow it changes the color of the typeface or the z-index, i don't know what exactly the problem is. 

useGSAP(

() => {

if (

!firstTextRef.current ||

!secondTextRef.current ||

!arrowRef.current ||

!boxRef.current

)

return;

 

const splitFirst = new SplitText(firstTextRef.current, { type: 'chars' });

const splitSecond = new SplitText(secondTextRef.current, {

type: 'chars',

});

 

gsap.set(splitSecond.chars, { y: 550, visibility: 'hidden' });

gsap.set(boxRef.current, { y: 100, autoAlpha: 0 }); // Set initial state

 

const tl = gsap.timeline();

 

tl.from(splitFirst.chars, {

y: 550,

opacity: 0,

stagger: 0.05,

duration: 0.6,

ease: 'circ.out',

})

.from(

arrowRef.current,

{

opacity: 0,

scale: 0,

duration: 0.4,

ease: 'back.out(1.7)',

},

'-=0.3'

)

.to(boxRef.current, {

y: 0,

autoAlpha: 1,

duration: 0.6,

ease: 'circ.out',

})

.to(

splitSecond.chars,

{

y: 0,

visibility: 'visible',

stagger: 0.05,

duration: 0.6,

ease: 'circ.out',

},

'-=0.3'

);

},

{ scope: containerRef }

);

 

it might be because of the chaining or the timeline, i've tried working with z index in css and in gsap as well but nothing really works. is there a solution for this problem?

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Cassie]

I would guess, if you're not changing the color of the text with GSAP, that there's a specificity issue? Maybe by wrapping the text your CSS isn't cascading or applying to the element?

 

Hard to tell without seeing a demo though, I'll check as soon as you post one ?

[heckspoiler]

ok so if this is not a known issue I'll keep on fooling around with my code until a solution is found. The problem is that if i don't use the tl and leave it as it is without the animation, the text keeps the color it is supposed to have. I think it might be the because of the chaining, if i find the solution i'll let you guys know! 

[heckspoiler]

So for people in the future that might struggle with the same problem i found the solution:  In my globals.css I've set * {color: var(--black)} and that overwrote the styles. 

[Rodrigo]

Hi,

 

I'm late to the party here but maybe this demos can help you or another user that comes by this thread:

See the Pen mdKWBmm by GreenSock (@GreenSock) on CodePen.

 

See the Pen LYJavxr by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!