Jump to content
GreenSock

Creativist-Lab

Animating boxShadow

Recommended Posts

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.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 weeks later...

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?

Link to comment
Share on other sites

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


 

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×