multiple animation boxshadow on same element

[Backit]

Hi, i'm trying to replicate the css button in the codepen. Basically it's scale plus two boxshadow effect. My multiple boxshadow animation does not work, only last boxshadow is applied.

Many thanks

See the Pen QwWWgYw by backit (@backit) on CodePen.

[Rodrigo]

Hi,

 

The basic problem is that you're creating conflicting tweens, that is GSAP Tweens that target the same element and the same property and overlap themselves. So you have two instances trying to tween the box shadow property of the same element at the same time, that is just not possible.

 

There are some workarounds though, one option is to duplicate the button:

See the Pen VYwwzdJ by GreenSock (@GreenSock) on CodePen.

 

Another option could be to use either the before or after pseudo element and tween a CSS variable that is applied to that pseudo element, with that you avoid duplicating the button:

See the Pen abRVwed by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Backit]

Great solutions!!

Cool the second codepen, but have you mistaken the url? This is not about after and before.

I understand the idea behind though.

 

Many many thanks!!

[Rodrigo]

2 hours ago, Backit said:

Cool the second codepen, but have you mistaken the url? This is not about after and before.

No the URL is right, the codepen shows how to use CSS variables and tween their values. I don't have a demo that uses pseudo elements with CSS variables, but given that you already had the demo with the pseudo element is just about adding the CSS Variables stuff to it.

 

Happy Tweening!

[Backit]

understood! Thanks!