Superfein

Thanks Cassie! So I tried to change the unit type, and that didn't work. But when I remove preserveAspectRatio="none" from the wrapper SVG of the turquoise tube, then the neon animation works. So there seems to be an issue in Safari where the CSS stretching (the height of the tube is 100vh in my CSS) of the SVG with a "none" aspect ratio set on the SVG, causes the animation to fizzle. Have you come across this before? What exactly are my options here...due to the complexity of the design I need it to be very malleable, that's why I set the aspect ratio to none so I could change it easily in the CSS. I'm kind of stumped. Any ideas?

Hi there Gsappers, I designed and animated several SVGs and I thought they were working perfectly...then I looked at them in Safari. Ouch! I've shared the first one here, perhaps more to follow. This triangle disappears completely in Safari on MacOS. It reappears when I remove the filter attribute on the polygon but that kills the animation. https://codepen.io/superfein/pen/bGmojRv Thoughts on how to make this Safari-friendly? Any assistance appreciated! Adding another Codepen here of another issue, notice how the tube does not animate when in Safari. https://codepen.io/superfein/pen/LYgzgRX?editors=0100 And this one isn't related to GSAP, it's about foreignObjects not scaling properly in Safari. Any ideas on how to fix this one? https://codepen.io/superfein/pen/NWOaOLj?editors=0100

Oh, haha, somehow I missed that whole section in the docs. My bad. Thanks Mikel, that's super clear.

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!

Incredible! You really go above and beyond. I'm really chuffed. Thanks again @Cassie and @mikel.

YES!!! @mikel this is exactly what I had in mind. Thank you!!

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!!

Hi! I was inspired by this Pen: https://codepen.io/GreenSock/pen/rNOBLBV 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. ?