Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
krawczuk

Problem in Chrome and Safari browsers.

Recommended Posts

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!

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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

But I will test the tip of the GreenSock. 

Thank you again.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Many thanks rhernando. 

 

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

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