Jump to content
Search Community

Animate Box Shadow on ScrollTrigger

Superfein test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi! I was inspired by this Pen: 

See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen

 

I have a neon tube (SVG with several box shadows for the glow) and I was wondering what would be the best way to animate it on scroll?

 

I know that animating box-shadow is non-performant, so what are my options if I want to have the neon glow and animate the glow from top to bottom of the SVG on scroll?

 

Could I animate the height of the SVG as a way to make it look like the tube is animating down...but I thought it would look more impressive if the tube is there without the glow and the glow animates downwards on scroll. 

 

Any assistance much appreciated!

 

P.S. Hoping Cassie responds because she's my SVG animation hero. 😀

See the Pen ZEaxddo??editors=0110 by superfein (@superfein) on CodePen

  • Like 1
Link to comment
Share on other sites

Hello mate!

 

This is a bit of an SVG deep dive really. The GSAP bit is nice and simple!

First up let's take a look at how to do the glow. At the moment you're applying a box shadow to the SVG element itself. If you plan to animate the shape inside the SVG, this isn't going to work as the glow isn't applied to that shape - it's applied to the 'container'

We also can't apply CSS filters to SVG elements. 🙃 So what we need to do before we can get animating is to recreate the CSS box shadow using SVG filters.

SVG filters are just like CSS filters but you can do pretty much anything with them by combining different filter primitives.

Check it out. I've left some comments in there to explain what's going on.

See the Pen wvPjzwo?editors=1010 by GreenSock (@GreenSock) on CodePen



Then we can use GSAP to animate that shape. You'll notice the shape in the previous pen isn't a rect anymore like your example - it's a line. This is so we can use drawSVG to draw in the stroke. (The rect element is a shape with a fill and drawSVG needs a stroke to work)

Now, you may be wondering why we couldn't just scale the rect element. We can - but it'll 'squish' the shape and the filter will be distorted. Example below....

See the Pen MWOGqPz?editors=1010 by GreenSock (@GreenSock) on CodePen



So, now we have the animation sorted - the next step is to resize the SVG and hook the animation up to scrollTrigger.

 

See the Pen JjOvaqd by GreenSock (@GreenSock) on CodePen

 

There's a lot of SVG biz going on here, happy to answer any questions you have! If they're specifically SVG questions and not GSAP I have an SVG slack over here which may be a better place to chat ☺️

 

Hope this helps!
 

  • Like 4
Link to comment
Share on other sites

And yeah, animating filters or box shadow is going to be a bit less performant than other properties, but it shouldn't be a huge issue here.

Another route would be to mask a shape with the filter on and animate that, but that might be a little bit too much to absorb all at once. Happy to go over that option if you'd like though!

  • Like 2
Link to comment
Share on other sites

Thank you so much @Cassie and @mikel! This forum is so friendly and inclusive, real SVG animation enthusiasts live here.

 

I had no idea SVG filter primitives were so powerful, and could be layered to produce the exact same effect as box shadow 🤯

 

Can SVG filters be animated? For instance, could the tube be set at whatever height (let's say 100vh) with the fill color set, so it's a neon tube turned off, and then the SVG filter glow effect animates down the tube using scrollTrigger? Or maybe the filter self-draws downwards on page load? Not sure what's possible with filters, how animatable they are.

 

I have joined the SVG Slack channel, that's like the pot of gold at the end of the SVG rainbow! Thanks for the invite, so kind!!

Link to comment
Share on other sites

I would really appreciate some clarification on the scrollTrigger end values. In the demo it's set to 'max' which works well in the demo but on my long homepage the end appears at the bottom of the page, very far away from the actual end of the line animation, so the animation doesn't work. I replaced it with a numerical value, 800, which seems to work well. I gather from the docs that the 800 value would be in pixels, is that correct? Was the 'max' value only meant for development, to be paired with the markers set to true?

 

I saw in the GSAP cheatsheet this:

 

  end: "20px 80%", // [trigger] [scroller] positions
  // or relative amount: "+=500"

 

What does the +=500 value mean, as in, what does relative amount mean in this instance? Thanks!

Link to comment
Share on other sites

Hey, Superfein,

 

from the DOCS ScrollTrigger:

Percentages and pixels are always relative to the top/left of the element/viewport. 
You can also define a single relative value like "+=300" 
which means "300px beyond where the start is", 
or "+=100%" means "the height of the scroller beyond where the start is". 
"max" is a special keyword indicating the maximum scroll position.

 

What exactly is unclear? 

  • Like 1
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.
×
×
  • Create New...