Forum Discussion

MattBotelho's avatar
MattBotelho
Community Member
3 months ago

Anyone find a fix for JavaScript Text Color Change?

A knowledgeable member of the community helped me resolve why my color changing codes were not working for Shapes and Text. However, looks like both of us are a bit stuck on why this code only affect...
  • MathNotermans-9's avatar
    3 months ago

    Found it, and here it is...
    https://360.articulate.com/review/content/b95f42f6-332c-4045-a261-01acd91fc3e9/review

    Im actually quite sure there will be situations where this will not work. Eg. text on a button is different...and there are quite some ways to use text in Storyline. I might walk through all text-options and fix this so you can use it on any text in any circumstance. But for now, for your case this sure will suffice.

    I added a function in it i use for creating randomcolors.

    const parent = document.querySelector('[data-acc-text="text2Change"]');
    gsap.to(parent, {duration:0.7,scale:1.5,transformOrigin:"top left"});
    
    Array.from(parent.children).forEach((child, index) => {
        const txtSpan = child.querySelectorAll('tspan');
    for (let i = 0; i < txtSpan.length ; i++) { 
          txtSpan[i].style.fill = generateRandomColor();
    }
    });
    
    function generateRandomColor(){
        let maxVal = 0xFFFFFF; // 16777215
        let randomNumber = Math.random() * maxVal; 
        randomNumber = Math.floor(randomNumber);
        randomNumber = randomNumber.toString(16);
        let randColor = randomNumber.padStart(6, 0);   
        return `#${randColor.toUpperCase()}`
    }

    And offcourse the source file :-)