Jump to content
Search Community

Tweening scale jumps at end

ActionDev 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

Hey all,


I was hoping someone could help with an issue I am having on tweening scale of a div that has a background image.


The problem is that at the last moment the graphic snaps to this ugly blurred version. It looks good all up until that last moment. Does anyone have suggestions on how to handle or how to produce best experience? 


You can see super simple demo here(check view source, js/css is coded in html header):




They both have mousexover/mousexout listeners that adjust scale. Over it goes to 100% and out it goes to 80%.


Top is effecting background-image and bottom is doing strait scale. 



I was thinking swapping with another image after the ween that would be at the smaller size though 100% however, I am trying to save as much k weight as possible.





**HAHAHAHA - I just got this error when submitting "Sorry, an error has occurred. Your topic contains the following suspected spam word, SExO" and it was because mousexover and mousexout(without x) were the issue

Link to comment
Share on other sites

My guess is that background-size forces the background to snap to whole pixel-values thus the jittering. 

Even for simple examples it is FAR better to provide a CodePen demo so that we can experiment with the code to get a more accurate understanding of what is going on and perhaps a solution.


Read more here: 



One thing I would suggest would be to use only CSS to set the background-size to 80% and see what the results are.

  • Like 1
Link to comment
Share on other sites

Thanks for input Jonathan, I will working on creating a demo in CodePen.


I also thought that it could be background-size forcing to whole px values so I used the RoundProp plugin and that did not help either.


On your second suggestion, are you saying use the actual css file for setting image at 80%? or Using tweener to tween background-image to 80% because I am already doing that.



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