Forum Discussion

JoshuaThian's avatar
JoshuaThian
Community Member
9 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:'#8d3dae'});

 

It doesn't work. I think it because my accessibility text 'Gemba' is the name of the text box and not the text itself?

If i change 'fill' to 'backgroundColor', it changes the textbox color. But i want to change the text color.

 

Any help is appreciated.

 

Thank you.

Joshua

storyline 360
  • Nedim's avatar
    Nedim
    9 months ago

    Try this:

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

     

5 Replies

  • JerryMurch-e033's avatar
    JerryMurch-e033
    Community Member
    2 months ago

    Does anyone know if there's a way to take advantage of the new "Object reference" feature inside the JS editor and still use this syntax or something similar? Neither fill nor backgroundColor seem to do anything when I'm targeting objects with the code it generates. Example below...

    //this is the selector code generated by the Object Reference feature
const Text1 = object('6jE4Pn5wovd');

//this motion animation functions as expected
gsap.to(Text1, {y:180, duration: 1, ease: "power1.out"})

//neither of these have any effect
gsap.to(Text1, {duration: 1, fill: '#891828'})
gsap.to(Text1, {duration: 1, backgroundColor: '#891828'})
    • Nedim's avatar
      Nedim
      Community Member
      2 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
        2 months ago

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

  • Nedim's avatar
    Nedim
    Community Member
    9 months ago

    Try this:

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