Jump to content
Search Community

Subpixels/Anti-Aliasing -> OFF?

Lasercode test
Moderator Tag

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

Hi,

I read some topics where people WANT the smoothing applied by modern browsers, if you rotate or zoom images for instance. That is NOT what I search for.

In my example there are three spans with border. Two of them are being rotated and get new top/left positions, and even if their final rotation is 90 degrees, they become smoothed. How can i DISABLE this somehow? I was really searching a long time, and all I assume is that this is browser rendering dependent, but maybe I can get a hint here.

post-12985-0-45312500-1409306078.pngpost-12985-0-94635900-1409306078.png

Btw: When I reverse that animation back from picture 2 to picture 1, they are crisp again.

Thanks!

Link to comment
Share on other sites

Unfortunately this is just how browsers work with 3D transforms; any rotation other that 0 is going to be rendered like that. I've never come across anything that would disable this. For something like those shots, you might be able to swap out the rotated rectangles for horizontal ones with no rotation onComplete.

  • Like 2
Link to comment
Share on other sites

Have you tried adding perspective to the rotated elements parent.. or transformPerspective to element it self? 

 

Usually this helps smooth out blurry transformed elements and text, especially in Chrome!

// sets perspective to the elements children
TweenLite.set("#elements-parent", {perspective:1000});
// sets transform perspective to the element
TweenLite.set("#element", {transformPerspective:1000});

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

 

:)

  • Like 1
Link to comment
Share on other sites

Hello Lazorcode, I'm very interested to see what your seeing in your browser.. Do you have a codepen example?

 

What browser, and browser version you seeing this in?

 

If you can provide a limited codepen example, I would love to test and help figure this out if possible. It is better to test your code live, versus just going by the image screenshots you provided above.

 

Even though this could be a browser rendering bug. Usually, it could be a matter of tweaking your transforms width and height.. adding backfaceVisibility and transformStyle .. or even changing default transformOrigin by 1%.

 

Debugging in Google Chrome, you can go to chrome://flags/ and enabling 'Composited render layer borders'. To find what space the element has when rendering on its own layer. And then tweak your transformed element until you see when it is not blurry.

 

Here is a nice video tut by GreenSock on how to create a codepen demo example.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/?view=getnewpost

 

So if you can provide a codepen example im willing to help debug, its worth a shot. :)

Link to comment
Share on other sites

Hi Jonatron ;)

That is very nice of you. Unfortunately I cant just extract the HTML/CSS stuff, as this project is rather large, worked with compass and grunt, many dependencies (and different SCSS files), and I am just the guy for the animations and interactions. So I am very sorry not to be able to provide the needed codepen. Additionally I am under extreme time pressure, which makes it finally impossible. :(

I didnt get the chrome stuff you talked about (after activating the flag), seems interesting though..
I will check out the CSS hints of yours and definetely get back in touch if I get any results.

*marked unsolved again*

 

Link to comment
Share on other sites

  • 11 months later...

Just wanted to mention transformPerspective applied directly into the tween massively helped out on a project I'm currently working on. I'm still unsure of the exact reasons as to how it works - but wow! My awful blurry scaled down image sharpened up a treat!

 

Thanks guys!

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