Superfein Posted February 21, 2022 Share Posted February 21, 2022 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted February 21, 2022 Share Posted February 21, 2022 That's cheered my day up! It's the end of my day now - but I'm putting an example together and I'll reply either later or first thing tomorrow ☺️ 2 Link to comment Share on other sites More sharing options...
Cassie Posted February 22, 2022 Share Posted February 22, 2022 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! 4 Link to comment Share on other sites More sharing options...
Cassie Posted February 22, 2022 Share Posted February 22, 2022 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! 2 Link to comment Share on other sites More sharing options...
mikel Posted February 22, 2022 Share Posted February 22, 2022 Here is an example with a glow image: See the Pen OJOZPdz??editors=1000 by mikeK (@mikeK) on CodePen Happy glowing ... Mikel 4 Link to comment Share on other sites More sharing options...
Superfein Posted February 22, 2022 Author Share Posted February 22, 2022 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 More sharing options...
mikel Posted February 22, 2022 Share Posted February 22, 2022 Hey @Superfein, If you create the glow with a separate path, you can of course animate this path. See the Pen MWOGLYx by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 5 Link to comment Share on other sites More sharing options...
Superfein Posted February 22, 2022 Author Share Posted February 22, 2022 YES!!! @mikel this is exactly what I had in mind. Thank you!! Link to comment Share on other sites More sharing options...
Solution Cassie Posted February 22, 2022 Solution Share Posted February 22, 2022 Updated 👀 - See the Pen PoOeVpR by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
Superfein Posted February 22, 2022 Author Share Posted February 22, 2022 Incredible! You really go above and beyond. I'm really chuffed. Thanks again @Cassie and @mikel. 2 Link to comment Share on other sites More sharing options...
mikel Posted February 22, 2022 Share Posted February 22, 2022 ... another option See the Pen eYerxVm?editors=1010 by mikeK (@mikeK) on CodePen 3 Link to comment Share on other sites More sharing options...
Cassie Posted February 22, 2022 Share Posted February 22, 2022 The year is 2032 - Mikel and Cassie are still engaged in an endless battle to post the ultimate neon-tube demo 6 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 23, 2022 Share Posted February 23, 2022 Excellent support Ladie and Gentlemen!!!! Also as a side note, with all those glowing SVGs I'm getting a lot of Light Sabers vibes in this thread 3 Link to comment Share on other sites More sharing options...
mikel Posted February 23, 2022 Share Posted February 23, 2022 Hey Rodrigo, Exciting you is a nice glow! See the Pen NWwzgEG??editors=1010 by mikeK (@mikeK) on CodePen Thanks Mikel 2 Link to comment Share on other sites More sharing options...
Superfein Posted February 23, 2022 Author Share Posted February 23, 2022 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 More sharing options...
mikel Posted February 23, 2022 Share Posted February 23, 2022 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? 1 Link to comment Share on other sites More sharing options...
Superfein Posted February 23, 2022 Author Share Posted February 23, 2022 Oh, haha, somehow I missed that whole section in the docs. My bad. Thanks Mikel, that's super clear. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now