Jump to content
GreenSock

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

Obj animation leaves background traces in WebKit

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

I'm using a simple animation on a object

TweenMax.fromTo($('#navigation .active-field'), actFieldSpeed, 
   {css: {top: ((index - 1) * 1.5) + 'rem', 
          backgroundColor: prevColor}, immediateRender: true}, 
   {css: {top: ((index ) * 1.5) + 'rem', 
          backgroundColor: altColor}}) 

 

Problem is, that it leaves traces of of object's background in WebKit-based browsers under reverse animation. What can be cause of that? http://studijaodri.lt/klientai/musu/#digital_agency

post-14554-0-93571600-1365405882_thumb.png

Link to comment
Share on other sites

Adding

-webkit-backface-visibility: hidden;
to the moving element's style can sometimes help with this. It also can't hurt to upgrade your GSAP files to the latest version.

 

One last thing: TweenMax includes TweenLite, TweenMax, TimelineLite, TimelineMax, easing.EasePack, plugins.CSSPlugin, plugins.RoundPropsPlugin, and plugins.BezierPlugin, so you don't need to include TimelineLite beforehand.

  • Like 2
Link to comment
Share on other sites

 

Adding

-webkit-backface-visibility: hidden;
to the moving element's style can sometimes help with this. It also can't hurt to upgrade your GSAP files to the latest version.

Well that solved the "traces" problem, but the object won't change colors anymore. I've tried a seperate element, but it still leaves those linse. Strange thing is then I select them (highlight) the disapear.

Link to comment
Share on other sites

Sorry to hear you are having problems.

 

Yes, the artifacts (traces) are unfortunately quite common in webkit browsers, and they aren't always easy to replicate on multiple systems. Its definitely a browser rendering issue and nothing that GSAP is doing.

 

As Jamie recommended, -webkit-backface-visibility: hidden; usually does a fine job of preventing the artifacts. 

 

However I have never seen this setting prevent a background-color change from animating.

 

I tried to force this odd behavior here: 

See the Pen eaHqJ by GreenSock (@GreenSock) on CodePen

and couldn't reproduce the artifacts or the background-color issue.

 

Another suggestion for the artifacts has been to set a 1px transparent border on the tweened element. 

 

If you can produce a reduced test case of the backface visibility setting interfering with a background-color tween it would be helpful. Feel free to fork that codepen example I submitted and try to get it to break.

 

Unfortunately there is very little we can do to trouble shoot the live version of your site.

  • Like 1
Link to comment
Share on other sites

I've noticed that bug appears when the window is scrolling up. I've used the .reverse() funtion on the object, and it got back without a traces.

 

That's preatty unpleasant situation, I've could do a workaround - try to change colours with Raphael, but I can't find a way to "fire" the function on the .reverse() call. 

 

If you noticed, I'm using superscrollorama plugin.

Link to comment
Share on other sites

Another thing that sometimes helps is setting a z-index on the element(s) in question. Like Jamie and Carl mentioned, this isn't related to GSAP at all - it's just a browser rendering issue. Annoying, I know. 

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