Problem in Chrome and Safari browsers.

[krawczuk]

I made a transition animation in a few boxes in my site and it's making my texts remain in effect blur and blur.

Can anyone help me?

This is the site: www.krawczuk.com.br / koletivo-creative.

Thank you!

[Jonathan]

Hello krawczuk, and Welcome to GreenSock Forum!

 

That link you posted is broken or a incomplete link. I even tried correcting your link since there were spaces in it... but no site found! ...  So there is no way to even look at your site.

 

But to better help you.. can you please set up a reduced codepen demo example so we can better see the blurred text code and behavior.

 

Here is a video tut by GreenSock on How to setup a codepen  demo example.

 

By setting up the limited codepen example, we can see just the GSAP code you are using to troubleshoot the behavior in a live code environment.

 

Thanks .. we are all willing to help you, but we need to see your code in action.

[GreenSock]

Like Jonathan said, a sample would REALLY help, but I will offer one tip: often if you have some sort of 3D transform applied to an element, the browser essentially takes a "screen capture" of that element at its native size, and then if you scale it up (like to a scale of 2 or more), you'll really start to see some blurring happening but that has absolutely nothing to do with GSAP. It's a browser thing and an "optimization" they're doing for rendering speed. To counteract this, I'd recommend building it in a way where the native size is the largest you'll need, and then only scale down from there. In other words, instead of scaling from 1 to 4, just build your asset so that it starts out at 4, and immediately scale it down to 0.25, and then back up to 1. It'd end up looking exactly the same animation-wise, but it'd be much sharper because the "screen capture" is higher resolution. 

[krawczuk]

Thanks guys, I'll put an example in codepen soon as possible. 

But I will test the tip of the GreenSock. 

Thank you again.

[krawczuk]

Personnel, as yet not had time to put an example in CodePen. 

 

I'm putting the link to the right site. 

 

http://krawczuk.com.br/koletivo-criativo

 

If you can help me, I'll be very grateful. 

Thank you!

[Rodrigo]

Hi,

 

Thanks for correcting the link, but it's still a little hard to know what could be the issue. You mention some blur text, but you don't specify which text.

 

I'm going to assume that the problem is when you hover the "galeria" <li> items. As you mentioned webkit (chrome and safari) tend to give some problems with text rendering, when transformations are applied to their container parents. The code that affects those elements is between lines 95-110 in your main.js file:

var botaoThumb = containerInfo.parentNode.childNodes[1].childNodes[1];

botaoThumb.onmouseover = function () {
  var containerInformacao = this.parentNode.parentNode.childNodes[3]
  TweenLite.to(containerInformacao, 1, {
    x: -49,
    y: -370,
    ease: Power4.easeOut
  });
}

botaoThumb.onmouseout = function () {
  var containerInformacao = this.parentNode.parentNode.childNodes[3]
  TweenLite.to(containerInformacao, 1, {
    x: -49,
    y: 0,
    ease: Power4.easeOut
  });
}

One option could be to pass those animations to the GPU using force3D, like this:

TweenLite.to(containerInformacao, 1, {
    x: -49,
    y: -370,
    force3D:true,
    ease: Power4.easeOut
  });

TweenLite.to(containerInformacao, 1, {
    x: -49,
    y: 0,
    force3D:true,
    ease: Power4.easeOut
  });

Another would be to use the technique crafted by Jonathan in this post, which takes care of the blurry text:

 

http://forums.greensock.com/topic/9173-scaling-an-element-becomes-pixelated/?view=findpost&p=36948

 

Rodrigo.

[krawczuk]

Many thanks rhernando. 

 

I'll do some tests and post the result here.