Help needed: Changing the color of an object with javascript

May 15, 2024

Marcel Lendi
By Marcel Lendi

I like to create an object (e.g., a rectangle) and change its color using 3 sliders (RGB). I read the slider values into Javascript and calculate the Hexadecimal value. I found this calculation on https://learnersbucket.com/examples/interview/convert-rgb-to-hex-color-in-javascript/. )

var player = GetPlayer();
var RedValue = player.GetVar("SliderRed");
var GreenValue = player.GetVar("SliderGreen");
var BlueValue = player.GetVar("SliderBlue");
var HexValue = "#" + ((1 << 24) + (RedValue << 16) + (GreenValue << 8) + BlueValue).toString(16).slice(1);

Now I want to change my object to this HexValue. I don't know how to do the last step. Must be something like object.style.backgoundColor = HexValue

How do I assign a color to an object?

4 Replies
John Cooper
18 days ago05/15/24 at 10:35 pm (UTC)

Hi Marcel

You should be able use the GSAP Animation JavaScript code library which is integrated into Storyline. You will need to find the ID of the rectangle you want to change but then it will be something like:

  gsap.to('#shapeID', {
    duration: 1, // Duration in seconds
    backgroundColor: "#00ff00", // Target color in hex format
    ease: "none" // Type of easing
  });
 
There are way better experts here that use GSAP regularly that will be able to correct my code if it's wrong - but definitely GSAP will do it.
Sign In to Reply