adjust element shadow to the roation of svg element

[mindthegap]

I animate a svg element, movement and rotation. how can i adjust the shadow to the rotation.

it is currently controlled by css, which is of course static at first, how can I set the style dynamically with gsap.

 

this.tween = gsap.to(element, this.random(1.5, 2.5), {x: newPoint[0], y: newPoint[1], rotation: newRotation , delay: this.random(4, 10), ease:"power2.inout", onComplete:this.randomMovement, onCompleteParams:[element, arrayPos]});

 

 

<g id="timeout-stoerer" transform="translate(960 -540) rotate(0)" class="svg-dark-shadow">
   <path ...
</g>

 

.svg-dark-shadow {
  filter: drop-shadow(12px 12px 6px orange);
  // filter: drop-shadow(0px 3px 3px rgb(221, 8, 8));
}

[Cassie]

Hi there @mindthegap,

 

Thanks for being part of Club GreenSock.

 

Firstly I would advise against animating filters for performance reasons.

But if you do want to animate it this is how:
 

gsap.to('.svg-dark-shadow', {
 'filter': 'drop-shadow(20px 23px 3px rgb(221, 8, 8))'
})

I haven't tested this because you haven't added a codepen - but you might not be able to animate between orange and an RGB value in the string. If it doesn't work try converting 'orange' to an RGB value so the strings match up.

[mindthegap]

On 2/7/2022 at 1:29 PM, Cassie said:

Firstly I would advise against animating filters for performance reasons.

performance isn't an issue, installation setup with fine hardware.

 

ok, I'll try to use the current rotation to change the shadow.