Superfein
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Superfein
-
-
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 thepolygon
but that kills the animation.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.
See the Pen LYgzgRX?editors=0100 by superfein (@superfein) on CodePen
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?
See the Pen NWOaOLj?editors=0100 by superfein (@superfein) on CodePen
See the Pen bGmojRv by superfein (@superfein) on CodePen
-
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 theend
appears at the bottom of the page, very far away from the actualend
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 themarkers
set totrue
?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 doesrelative amount
mean in this instance? Thanks! -
-
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:
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
SVG in Safari (so many issues!)
in GSAP
Posted
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?