Forum Discussion
Change a text color using javascript GSAP
Try this:
let gemba = document.querySelector("[data-acc-text='Gemba'] text"); gsap.to(gemba, {duration:2, fill:'#8d3dae'});
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'})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 } );That first example in your reply works for what I had in mind, thank you! And thanks for the context there too.