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

How To
1

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:

Event:
On MouseEnter

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

Action:
GSAP To

Action Settings:
Target Element - Custom (Document QuerySelectorAll)
#target

JavaScript Object:
{ backgroundColor : trigger.style.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!

Thanks!

2

Hey :slight_smile: I guess the background color of your trigger element is set via CSS? If so, the trigger.style.backgroundColor 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
3

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

1 Like