How to apply trigger style to target in "GSAP To"?

I’m trying to set the background color of a target (#target) to be the background color of a trigger (#trigger) on mouseover, using GSAP To.

Here’s my setup:

On MouseEnter

Select Element(s) (Trigger):
“all elements with this selector”
Console Log


Action Settings:
Target Element - Custom (Document QuerySelectorAll)

JavaScript Object:
{ backgroundColor :}

I get the console event, so the trigger is working fine, but the target doesn’t change.
If I change the Javascript object to: { backgroundColor : “red” } then everything works fine, and the target turns red when I mouseOver the trigger.

Can I access both the trigger and the target in one action?

Any help would be massively appreciated. I feel like the answer is just out of reach!


Hey :slight_smile: I guess the background color of your trigger element is set via CSS? If so, the will be empty.

Do this instead:

  backgroundColor: getComputedStyle(trigger).backgroundColor,

This should set the current background color of your trigger element correctly :slight_smile:

1 Like

Oh you absolute legend! Thank you very much :slight_smile: This is working well.
I now have some learning to do.

1 Like