Jump to content
Search Community

Animation so blurry on Iphone, Android are fine.

rockmandash test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, my animation on iphone is so blur.

I use svg on all elements, so there is no way blur.

When I animate svg inside a div, it looks blur.

When the GSAP timeline ends, everything looks fine.

So it is blur during animation.

I test on iphone safari and chrome, it is blur.

But android looks fine!

 

Here is my source code, if you open it with mobile, it will load mobile code, otherwise it will load desktop code.

So there is two version

https://github.com/rockmandash/InteractiveInfographic2

 

Here is the website:

https://rockmandash.github.io/InteractiveInfographic2/

 

I tried these code, but not helping.

body {
    filter: none !important; 
    -webkit-filter: blur(0px) !important; 
    -moz-filter: blur(0px) !important; 
    -ms-filter: blur(0px) !important;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0') !important;
}

Here is the testing video!!  Please take a look what happened.

https://youtu.be/_8GOauh1Ko0

 

 

Many many thanks on this awesome community!!!!

Link to comment
Share on other sites

  • Solution

Hello rockmandash and Welcome to the GreenSock Forum!

 

It is really hard to debug your website, and to find out what is going on without testing your code in a live editable environment like codepen. It is highly recommended to provide a reduced codpen demo with the tweens that are causing you issues or blurriness.

 

But having said that, I did notice you are mixing jQuery css() and GSAP. You should really use ether or, so GSAP can keep track of what your animating. For example i see your setting a transform scale with jquery css() .. in that case you should use GSAP set() method so GSAP can record that scale value. Otherwise you are changing transform values outside of GSAP and it will be harder for it to record and keep track of your values.

 

GSAP set() https://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

But based on what you describe it sounds like it is a webkit anti-aliasing bug. You can add force3d:false on each of your tweens. And it should have that anyway since your animating SVG, and SVG 1.1 does not support 3D transforms that use matrix3d or translate3d().

 

force3d:false will tell GSAP not to use translate3d() or matrix3d() and then it will use matrix() or translate() to animate with. Webkit based browsers like Chrome and Safari have this webkit anti-aliasing bug that can cause elements to become blurry when having a 3D transform.

 

So for example one of your tweens looks like this:

.from("#phoneScene01 .svg01Cloud01", 0.6, { y: 100, opacity: 0 }, 0.3)
Then add force3d:false on it:
.from("#phoneScene01 .svg01Cloud01", 0.6, { y: 100, opacity: 0, force3d:false }, 0.3)
Add force3d:false to all your tweens. Then the blurriness should go away. ;)

 

If you are still having issues, then please create a reduced codepen issue with the tweens that are giving you issues.

 

 

Thank You! :)

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Hello rockmandash and Welcome to the GreenSock Forum!

 

It is really hard to debug your website, and to find out what is going on without testing your code in a live editable environment like codepen. It is highly recommended to provide a reduced codpen demo with the tweens that are causing you issues or blurriness.

 

But having said that, I did notice you are mixing jQuery css() and GSAP. You should really use ether or, so GSAP can keep track of what your animating. For example i see your setting a transform scale with jquery css() .. in that case you should use GSAP set() method so GSAP can record that scale value. Otherwise you are changing transform values outside of GSAP and it will be harder for it to record and keep track of your values.

 

GSAP set() https://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

But based on what you describe it sounds like it is a webkit anti-aliasing bug. You can add force3d:false on each of your tweens. And it should have that anyway since your animating SVG, and SVG 1.1 does not support 3D transforms that use matrix3d or translate3d().

 

force3d:false will tell GSAP not to use translate3d() or matrix3d() and then it will use matrix() or translate() to animate with. Webkit based browsers like Chrome and Safari have this webkit anti-aliasing bug that can cause elements to become blurry when having a 3D transform.

 

So for example one of your tweens looks like this:

.from("#phoneScene01 .svg01Cloud01", 0.6, { y: 100, opacity: 0 }, 0.3)
Then add force3d:false on it:
.from("#phoneScene01 .svg01Cloud01", 0.6, { y: 100, opacity: 0, force3d:false }, 0.3)
Add force3d:false to all your tweens. Then the blurriness should go away. ;)

 

If you are still having issues, then please create a reduced codepen issue with the tweens that are giving you issues.

 

 

Thank You! :)

 

I am really sorry for the late reply!

Thank you for replying me.

After adding false3D:false to my mobile version animation.

iPhone safari blur problem completely solved!

COMPLETELY SOLVED MY PROBLEM THANK YOU!!

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