Jump to content
Search Community

Choppy Background Tweens

themepunch 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,

 

In one of our current project we need to animate background images. Some pan zoom effect.

 

Unfortunately the markup should stay as it is, so we decided to tween background properties like background-position and background-size.

 

i made a short example here: 

See the Pen plGho by anon (@anon) on CodePen

 

and for even better demo of the negative effect: 

See the Pen rLzco by anon (@anon) on CodePen

 

If you see the 2nd example, you can see that the animation is very choppy. (best to see in FireFox :) 

Seems that the animation is always snapped to pixels. 

 

I am wondering if you have a solution here ? 

 

Cheers,

 

Krisztian

Link to comment
Share on other sites

Hi Krisztian,

 

Thanks for providing the reduced samples, it helped a lot.

 

I believe that this has to do with the fact that browsers don't work with sub-pixel rendering, as they turn to round decimal numbers. If you add to that the fact that your animations are quite long (16 seconds) and that you're animating two different properties at the same time, the result is your images moving very slowly into their new positions and increasing it's width and height, also very slowly.

 

If you reduce the animation times and use force3D:true you get better results, but with long animation times, there's not much to do. This sample seems a little better with force3D, which basically turns things into the GPU which allows working with subpixel:

 

See the Pen plGho by anon (@anon) on CodePen

 

But for the other sample it doesn't works.

 

Finally, this is not a GSAP issue, just the way browsers rendering works and not much that it can be done about it, that I know, sorry. Perhaps another user could chip in and give some light in this matter.

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Just to reiterate, most browsers only do sub-pixel rendering on CSS transforms, but NOT for things like background-position or top or left or width or height or almost any other value. Those are always rounded to the closest number, even if GSAP sets it as a decimal (the browser does the rounding). So if you want it to be really smooth, you'll need to animate"x" and "y" in GSAP (which map to transform:translate() in CSS). I doubt you can do it on background-position, so you'd need to construct your elements differently so that you're animating the transforms of an element instead of background-position. As Rodrigo said, this has nothing to do with GSAP - it's just how browsers and CSS work. 

  • Like 2
Link to comment
Share on other sites

Hi,

 

thanks a lot fro your answer. AS always quick and exact. Unfortunately the reason was already clear for me. I was not clear in my question :-)

 

I thought you may have some solution/workaround here also, so i don't need to rebuild the containers. 

 

I will need to swallow the pill and reorganize the structures to be able to use x,y transforms.

 

Cheers,

 

Krisztian

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