backgroundColor in Articulate Storyline

[feksioglu]

Hello everyone.

This is probably a very simple issue but I can't make it work.

So I'm using Articulate Stroyline 360 (up to date). Although I'm not very good with Js, I've made it work several times before to get what I want using online resources and applying them to my project. 

In this particular issue, I have a rectangular shape. What I want to do is chage its color when mouse hovers ovet it. So all I need to do is use the correct code in "Execute JS when user hovers over" trigger in Storyline. You can see the code I'm using in the attached image. "box3" is obviously the alt text of the rectangle.

The strange thing is I tried many other codes like changing the x and y of the shape, scale, rotation etc. and they all worked but this one isn't working. Can anyone help me with this?

Thank you for your time.

 

[Cassie]

Hi there! It looks like it should work, I can't see the selector you're using or verify that the box is being targeted with the information provided though

 

Could you maybe recreate the selector you're using in this demo?

See the Pen KKEdeLg by GreenSock (@GreenSock) on CodePen

[feksioglu]

Hi! Thank you for your quick response!

Unfortunately I'm not quite sure what exactly "selector" is but I think you're asking me if the box thats supposed to change color is correctly addressed in the code. 

In Storyline, apparently, we use the alt text to target the objects. And "box3" is the alt text that I gave to my shape. The thing is, like I said, other codes like scale, rotate etc. all work when I add them here. It's just this backgoundColor. Maybe it's something with the Stroyline.

[Cassie]

Yeah, that was what I was asking, thanks. Largely because I'd expect alt text to be targeted like this

 

[alt="example"]

But I guess storyling is adding data attributes. No worries! If you say it's working with other properties I believe you.

 

The only thing I can think of is that maybe it's an SVG shape and not a div?

Have you tried fill instead of backgroundColor?

[feksioglu]

Oh, okay now I know what you mean. But apparently since Storyline supports GSAP, this is a workaround so we don't have to deal with extreme coding.

The box I'm trying to recolor is actually just a simple shape that you can add from the Insert->Shape menu. 

Anyways I think I just need to accept the fact that it, for some reason, doesn't work.

Thank you for your time Cassie!😊
 

[Cassie]

Quote

The box I'm trying to recolor is actually just a simple shape that you can add from the Insert->Shape menu. 

As I mentioned previously - Did you try fill instead of background color?

It's pretty likely that it's an SVG and not a div. SVG shapes don't have a background-color property, they have a fill property.

I'd try that before resigning hope!

gsap.to(".svg", {
 fill:"#970c10"
})

 

[feksioglu]

I forgot to mention, yes i tried "fill" as well. As for whether it's an SVG or a div, I'm not sure because idk how Storyline is designed. But yeah I tried them both and no luck. 

Again, thank you for your time, I really appreciate it!

[Cassie]

ah how annoying. Sorry I couldn't help. 

The only other thing I would suggest is if there's a browser preview of some sort (sorry I don't really know articulate) then maybe try right clicking the element and checking out the DOM to see what you're targeting.

If you have a link to a webpage I can look for you? It's gonna boil down to targeting the wrong element or targeting the wrong property I think.

   

 

 

[feksioglu]

Apparently, it's an SVG file! But even if I use the fillfunction as you suggested, it still won't work.

[GreenSock]

That's because you're targeting the wrong thing  with your selector text - you need to animate the fill on the <path> element. You're targeting one of the ancestor container <div> elements which has no "fill" property. 

 

Maybe like: 

"[data-acc-text='box3'] path"

 

[feksioglu]

Thank you so much! It worked!

[feksioglu]

4 hours ago, GreenSock said:

That's because you're targeting the wrong thing  with your selector text - you need to animate the fill on the <path> element. You're targeting one of the ancestor container <div> elements which has no "fill" property. 

 

Maybe like: 

"[data-acc-text='box3'] path"

 

 

Thank you so much! It worked!