Animating boxShadow

[Creativist-Lab 18 Likes (Newbie)]

Hello, sorry if this is a very basic question but I'm not able to figure it out. I'm trying to animate a boxShadow.

 

What I would like to achieve is having a boxShadow appear underneath a card. This is how the eventual box-shadow should look like: box-shadow: 0px 0.85em 2.15em 0px rgb(0 0 0 / 27%). But I would like to let the box-shadow start completely hidden underneath the card.

 

I thought by using gsap.to and targeting boxShadow and then animating it in by using the "x"and "y" offset would be the easiest but I can't get this to work.

Also by setting the starting point of the box-shadow to 0 and then with:

gsap.to(".slideShadow", { boxShadow: "0px 0.85em 2.15em 0px rgb(0 0 0 / 27%)", duration: 1, ease: CustomEase.create("custom", "M0,0,C0,0,0.144,0.728,0.518,0.872,0.876,1,1,1,1,1")}, 0) this just let's the shadow fade in instead of letting it move away from underneath the card.

 

 

Sorry for not attaching a codepen but hopefully my question is clear.

 

Thanks in advance.

[OSUblake 18,475 Likes (Superhero)]

1 hour ago, Creativist-Lab said:

Sorry for not attaching a codepen but hopefully my question is clear.

 

Not really. It's hard to answer questions without seeing the issue. The only recommendation I can really give right now is that GSAP does not use color values like that, so you should use standard rgb/a or hsl/a values, like rgba(0, 0, 0, 0.27).

[Creativist-Lab 18 Likes (Newbie)]

Hello @OSUblake thanks for your reply. I made a quick codepen where I replaced the box-shadow with another div so you hopefully understand the effect that I'm after. Basically I would like to animate the boxShadow in a similar way as that the div is being animated. I understand that I can add another div and animate this as in the codepen but that would complicate things so when possible I'm looking for a way to animate the boxShadow.

 

Thanks for any tips (once again )

 

See the Pen QWqKabv by JeroenVn (@JeroenVn) on CodePen

[Cassie 5,122 Likes (Superhero)]

My advice would really be to animate another DIV or span.

Box shadow isn't a good property to animate from a performance standpoint. It will look jerky and occasionally leave pixel artefacts behind as it animates.

[Creativist-Lab 18 Likes (Newbie)]

Thanks @Cassie not the answer I was hoping for but then I better go for the non easy solution.

[Cassie 5,122 Likes (Superhero)]

Sorry to be the bearer of bad news! Better to know before you craft the wrong solution though.

[Creativist-Lab 18 Likes (Newbie)]

It's a dirty job but someone has to do it No worries, I appreciate the advice and you're right, better to know.

[Tee Kick 0 Likes (Newbie)]

I have to same/ similar question.

And although the warning, I'd still like to see for myself.

 

Here's my codepen:

See the Pen ExwELvE by TKick (@TKick) on CodePen

 

Currently the shadows are defined like this:
box-shadow:
        0px 54px 55px 0px rgba(0, 0, 0, 0.8),
        0px -12px 30px 0px rgba(0, 0, 0, 0.7),
        0px 4px 6px 0px rgba(0,0,0,.7),
        0px 12px 13px 0px rgba(0,0,0,.8),
        0px -3px 5px 0px rgba(0,0,0,.5);

 

And need to become:
box-shadow:
        0px 14px 15px 0px rgba(0, 0, 0, 0.8),
        0px -2px 10px 0px rgba(0, 0, 0, 0.7),
        0px 2px 3px 0px rgba(0,0,0,.7),
        0px 6px 7px 0px rgba(0,0,0,.8),
        0px -1px 23px 0px rgba(0,0,0,.5);}

 

Currently the gsap code is:
.to(avtr, {duration: 3, y: 25, yoyo: true, repeat: -1})

 

I got this idea from:

See the Pen woJgeo by MarioDesigns (@MarioDesigns) on CodePen

Which is using CSS animation, which could be(come) an alternative method, IF I don't like the gsap solution.

 

I tried with

, {css: {box-shadow:
        0px 14px 15px 0px rgba(0, 0, 0, 0.8),
        0px -2px 10px 0px rgba(0, 0, 0, 0.7),
        0px 2px 3px 0px rgba(0,0,0,.7),
        0px 6px 7px 0px rgba(0,0,0,.8),
        0px -1px 23px 0px rgba(0,0,0,.5)}

But that's somehow faulty...

 

Any tips to get me going?

[Cassie 5,122 Likes (Superhero)]

Hey @Tee Kick

 

If you break that animation down - all that's happening is that the circle is moving up and down and the 'shadow' is getting larger and changing opacity.

I would just copy the box shadows onto a div and then change the opacity and scale of that div. Then you'll get the same effect and better performance. 

If you want to use boxShadow and don't mind about performance then here you go

See the Pen ExwLaEE?editors=0110 by GreenSock (@GreenSock) on CodePen

 

[Tee Kick 0 Likes (Newbie)]

2 hours ago, Cassie said:

Hey @Tee Kick

 

If you break that animation down - all that's happening is that the circle is moving up and down and the 'shadow' is getting larger and changing opacity.

I would just copy the box shadows onto a div and then change the opacity and scale of that div. Then you'll get the same effect and better performance. 

If you want to use boxShadow and don't mind about performance then here you go

 

Hi Cassie,

 

Well... I also wanted to see whether I could accept it or not. call me stubborn.

But yeah, I see now it will be a bit much, like that.

 

The other option you mentioned sounds like something that could work.
Will give it a try.

Thanks!