Forum Discussion

JoshuaThian's avatar
JoshuaThian
Community Member
12 months ago
Solved

Change a text color using javascript GSAP

Hi, I'm looking to change a text color using javascript GSAP. I tried the following code: let gemba = document.querySelector("[data-acc-text='Gemba']"); gsap.to(gemba, {duration:2, fill:'#8d3...
storyline 360
  • Nedim's avatar
    Nedim
    12 months ago

    Try this:

    let gemba = document.querySelector("[data-acc-text='Gemba'] text");
gsap.to(gemba, {duration:2, fill:'#8d3dae'});

     

Nedim's avatar
Nedim
Community Member
5 months ago

Try:

const textFill = document.querySelector('[data-model-id="6jE4Pn5wovd"] text');
gsap.to(textFill, { duration: 1, fill: '#891828' } );

The object returned by the newer JavaScript API does not reference the actual DOM element. It exposes only a limited set of properties and methods and doesn't give direct access to the underlying SVG DOM structure. Also, background-color is a CSS property for HTML elements, not vector shapes. An SVG <path> has no "background", only stroke and fill. The code above will change the color (fill) of the text. Were you trying to change that or the text background/path fill?

const textPathFill = document.querySelector('[data-model-id="6jE4Pn5wovd"] path');
gsap.to( textPathFill, { duration: 1, fill: '#734abc', fillOpacity: 1 } );

 

JerryMurch-e033's avatar
JerryMurch-e033
Community Member
5 months ago

That first example in your reply works for what I had in mind, thank you! And thanks for the context there too.