Jump to content
Search Community

artifacts left after animation

kitepwr 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

First, thanks for GSAP, I'm having a blast with it!

 

Second, an apology... you will probably need to reset your monitor to 1024x768 to see this issue. 

I'm doing a presentation that will be displayed via a projector that only does 1024x768, so that's what I'm stuck with.

 

In the codepen you can see white vertical lines left behind as the images animate right and left.  In higher resolutions, it's not noticeable, but in 1024x768 it certainly is.  Any ideas on how I can make them go away?

 

Thanks,

Darrin

See the Pen oGBpge by kitepwr (@kitepwr) on CodePen

Link to comment
Share on other sites

I would like to add more in case it helps you. Few years ago I was working on WPF project which is heavy on resources. So if I ever use a objects with transparency or drop shadows, my application would flicker. At the time I was using AMD cpu which was basically main culprit. I have never used projector so not sure if that can be an issue but try using different PC with better hardware, it most probably will work.

Link to comment
Share on other sites

Usually flickering has to do with missing CSS properties that trigger a bug in certain hardware. There have been webkit bugs that document this behavior. Since missing CSS properties like backface-visibility, perspective and transform-style can cause flicker flack, since the defaults in some of those properties need to be changed to the right value, especially when doing 3D transforms. :)

Link to comment
Share on other sites

Thanks all for looking into this.  Sorry, I forgot to mention the environment stuff...:

  • Windows 10
  • Chrome Version 61.0.3163.100 (Official Build) (64-bit)
  • CPU: Intel i5-4690
  • Video Card: HIS R9 280 IceQ OC 3GB GDDR5 (i.e. AMD Radeon R9 200 Series)
  • I'm running 3 monitors, 1 of them set to 1024x768 where I see the issues.

I have, just now, tested on a few different machines.  My other Windows 10 machine (a 5 year old high end Asus laptop) shows the artifacts, but less so then my development machine. This laptop *is* the machine I will run the presentation from at the convention, so that's my target environment.   My Mac's (2 different MBP's) do not show the lines at all (ya Mac!).   I won't have access to a projector until a few days before the presentation.  So, I don't know if this will be visible or not.  If there is not an obvious software/coding solution,  I guess my next best step would be to find a projector and see if this is really going to be an issue or not.

 

I've attached an image of what I see.  I had to remove colors and reduce the quality of the image quite a bit to fit the image upload size restrictions so ignore the swirls and just note the vertical lines in the background image.

 

Thanks a bunch!

Darrin

 

AnimationArtifacts3.jpg

Link to comment
Share on other sites

I just tested this again on a Windows 10 machine in Chrome 61 and it looks fine. I do have an NVIDIA card though. 

 

GSAP is only animating values and not doing any of the rendering so I'm not sure what you could change in the animation to make it go away. I wish I could offer more advice, but this looks like a graphics card/hardware thing. I'm sure you have all the latest drivers for everything? I don't know if anyone else will have additional advice.

 

Good luck and happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

I have seen this type of artifacting before and is browser related, not GSAP. Like I said previously it can be caused by either missing CSS properties and even CSS properties you are using. 

 

Try in your examples with your main container being position fixed. Use position relative for now until you narrow down the artifacts. Since your using position fixed on your main container it will cause a new stacking context. See here for stacking context.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

 

And then your not using position absolute on the elements your animating. As a rule of thumb anything animating in transforms should use position absolute so it animates out of the flow of the document. And your container should be position relative, so your IMG tags are positioned absolutely and relative to your main container.

 

But in this case your main container is set to position fixed. Position fixed is known to cause bugs in various webkit browsers which Chrome is. When I have time I will fork your example and the appropriate CSS properties for position offset layout and CSS properties that should be applied on the elements your animating. By doing that you limit or squash any rendering browser bugs and rendering artifacts.

 

:)

  • Like 3
Link to comment
Share on other sites

Thanks again everyone!   I didn't really think it was a GSAP bug or anything, but my hope was that there might be a setting somewhere that I'd missed.  And/or this community could give me a kick in the right direction.

 

Jonathan, that's the kind of direction I was hoping for ... and dreading too.  "Hoping" because it's a direction that might lead toward a solution and it helps to increase my knowledge.  "Dreading" because I have a fair investment in positioning/moving 'absolute' elements inside a 'fixed' container.  But, if I need to rework that library, that's what I'll do.

 

I do have one other idea to test out, will do that tonight after work.  The animation stuff is a side gig for a non-profit, so I only have the evenings to work on it.

 

Link to comment
Share on other sites

 

1 hour ago, Jonathan said:

But in this case your main container is set to position fixed. Position fixed is known to cause bugs in various webkit browsers which Chrome is. When I have time I will fork your example and the appropriate CSS properties for position offset layout and CSS properties that should be applied on the elements your animating. By doing that you limit or squash any rendering browser bugs and rendering artifacts.

 

I've tried different variations of fixed, relative, and absolute positioning and not found a combination that eliminates the artifacts.   Hopefully you can identify the CSS properties I need to apply and that will do the trick.  Thanks in advance!

 

Darrin

 

P.S. My 'other idea' did not change anything.  I realized I could reduce the background image from 5000x3750 to 1024x768 and hoped that would help with repainting.  But it made no difference.

Link to comment
Share on other sites

Do you see the issue on any of these demos?

See the Pen PJpXba?editors=0010 by osublake (@osublake) on CodePen

See the Pen YrZgXP?editors=0010 by osublake (@osublake) on CodePen

See the Pen vexPOO?editors=0010 by osublake (@osublake) on CodePen

 

If you see the problem in the first demo, then it is most likely a hardware issue. The canvas is opaque, so the browser can skip compositing, and just blit the images.

 

In the second demo, the canvas isn't opaque.

In the third demo, the canvas isn't opaque, and I'm not drawing the background inside of it.

 

  • Like 2
Link to comment
Share on other sites

Awesome Blake, none of your 3 demos show any artifacts.  I see they all use a canvas which I could change to using if needed.  But then I'll have 2 different techniques in my presentation (there's a lot more to the full presentation than just this little bit :-) ) which, if at all possible, I would rather not have.  Does this new information suggest to you  an approach (short of converting to canvas) I can use?  While I see what you've done in the 3 demos,  I'm afraid I don't know enough of the inner workings of this stuff to draw the same conclusions you can.

 

Again, my thanks. 

  • Like 1
Link to comment
Share on other sites

Today for some reason i saw some artifacts in a codepen that had no transforms, those same type of ghosting, but only in codepen and in latest Chrome 61. You might wait and see if those artifacts are still present in next release of Chrome. So this also might be something only in codepen, or only Chrome 61. And it could be a mix of both. I still think its due to missing CSS properties. But it wouldn't surprise me if Chrome was the culprit since the Google Chrome devs change a lot of behavior in how things render in Chrome, which is webkit based, which means the new IE. :)

Link to comment
Share on other sites

Interesting Jonathan, given that I had the issue before I create the codepen I'd vote for it being a Chrome thing.  Is there a way to identify the 'missing properties' so I can address that?  I don't know when the next release of Chrome is, but my presentation is in 2 weeks :-o

Link to comment
Share on other sites

Hey guys, just an update ... I was able to borrow a projector and it does NOT display any of the artifacts.  Given my time crunch I'm going to gamble that the projector I end up using for the presentation will behave the same.  With the differences between a projector lens and an LED monitor, I think I will be ok.  So, for now, I'm going to table this issue as an interesting discussion worthy of more attention at some future date.

 

Thanks for all the great feedback, was really appreciated.

 

Darrin

  • Like 3
Link to comment
Share on other sites

On 9/27/2017 at 2:25 PM, kitepwr said:

Awesome Blake, none of your 3 demos show any artifacts.  I see they all use a canvas which I could change to using if needed.  But then I'll have 2 different techniques in my presentation (there's a lot more to the full presentation than just this little bit :-) ) which, if at all possible, I would rather not have.  Does this new information suggest to you  an approach (short of converting to canvas) I can use?  While I see what you've done in the 3 demos,  I'm afraid I don't know enough of the inner workings of this stuff to draw the same conclusions you can.

 

Again, my thanks. 

 

Based on those canvas tests, it seems like the problem might be related to compositing the background, so I would try using an actual image for the background instead setting it in CSS. See how this looks.

 

See the Pen LzjoBz?editors=0010 by osublake (@osublake) on CodePen

 

 

 

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