Faraaz Posted September 20, 2021 Share Posted September 20, 2021 Hey there, As per the codepen, once you click the button, you are presented with two triangles, a circle and a range slider. The idea being that you can control the dimensions of both triangles while applying a blur filter to the circle using the same slider. As far as I'm aware, this works fine on desktop but after testing on mobile I only have control over the triangles, not the circle. Any ideas as to why that is and what to do about it? Many thanks in advance, Faraaz See the Pen dyReyZq by faraazh (@faraazh) on CodePen 1 Link to comment Share on other sites More sharing options...
nico fonseca Posted September 20, 2021 Share Posted September 20, 2021 Hey @Faraaz , welcome to the forum! 💚 Apparently this is a Safari bug. I tested it on Mac and Iphone, I don't know if your issue is happening on Android too. I added the filter in the HTML and it works well See the Pen a74e2ca0652ab6272c02bec133ccae49 by nicofonseca (@nicofonseca) on CodePen Btw, to use fromTo animation do it like this: tl.fromTo('.triangleL', 10, { attr: {points:'0,338 0,223 481,280'} }, { attr: {points:'0,398 0,163 481,280'} } ,0); instead of: tl.from('.triangleL', 10, {attr: {points:'0,338 0,223 481,280'}},0); tl.to('.triangleL', 10, {attr: {points:'0,398 0,163 481,280'}},0); 2 Link to comment Share on other sites More sharing options...
Cassie Posted September 20, 2021 Share Posted September 20, 2021 Hi there Faraaz, Welcome to the forums 🥳 Thanks Nico for finding that filter bug 🐛Some additional notes - We don't need to use attr anymore. AttrPlugin was baked into the core in the GSAP 3 release. No need to create from tweens with the initial values You can use Scale instead of morph Duration is unnecessary as you're using a slider to control the progress Invalidate is also not needed. // Circle - no attr plugin needed tl.to('.circle', {filter: 'blur(1em)'} , 0); //Triangles - scale both instead of morph tl.to('.triangle', { scaleY: 2, transformOrigin: 'center'}, 0); function update() { tl.progress(slider.value); // no need to call invalidate } See the Pen RwgyNvG?editors=0010 by GreenSock (@GreenSock) on CodePen Hope this helps! 2 Link to comment Share on other sites More sharing options...
nico fonseca Posted September 20, 2021 Share Posted September 20, 2021 @Cassie i didn't know about this Safari bug and i don't find anything related to it, but css filter is not working on svg elements 😮 Safari is the new IE!!! 😂 See the Pen 4c68be32786a888814a93cdbe34ab177 by nicofonseca (@nicofonseca) on CodePen 1 Link to comment Share on other sites More sharing options...
Faraaz Posted September 20, 2021 Author Share Posted September 20, 2021 Nico, your filter solution works a treat! Cassie, your scale solution has saved me from comparing polygon points 🙌 Thank you both for the warm welcome and for responding so swiftly! 3 Link to comment Share on other sites More sharing options...
PointC Posted September 20, 2021 Share Posted September 20, 2021 6 hours ago, Cassie said: We don't need to use attr anymore. AttrPlugin was baked into the core in the GSAP 3 release. I would think there are times to use the attr:{} wrapper. Something like targeting the actual x attribute of an SVG <rect> vs. a transform. GSAP is very smart, but if you specifically want to target an attribute in a situation where the attribute and CSS property have the same name, you can do so with the attr:{}. Just my two cents. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted September 20, 2021 Share Posted September 20, 2021 14 minutes ago, PointC said: I would think there are times to use the attr:{} wrapper. Something like targeting the actual x attribute of an SVG <rect> vs. a transform. GSAP is very smart, but if you specifically want to target an attribute in a situation where the attribute and CSS property have the same name, you can do so with the attr:{}. Just my two cents. Yes, you're exactly correct, @PointC. AttrPlugin was indeed baked into the core, but that just means that you don't have to load (or register) it separately. You still need to use attr:{...} to target attributes. 👍 3 Link to comment Share on other sites More sharing options...
OSUblake Posted September 20, 2021 Share Posted September 20, 2021 9 hours ago, nico fonseca said: @Cassie i didn't know about this Safari bug and i don't find anything related to it, but css filter is not working on svg elements 😮 It shows it's not supported on basically every browser according to MDN. 🤷♂️ https://developer.mozilla.org/en-US/docs/Web/CSS/filter#browser_compatibility 2 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