Jump to content
Search Community

Filter not working on mobile

Faraaz test
Moderator Tag

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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);


 

  • Like 2
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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. :)

  • Like 2
Link to comment
Share on other sites

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. 👍

  • Like 3
Link to comment
Share on other sites

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

 

image.png

 

 

 

  • Like 2
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...