Jump to content
GreenSock

dada78

Scaling backgroundSize issues

Go to solution Solved by dada78,

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

I feel like I have tried everything to get this to work, but for some reason I can't get this background image to scale properly.

 

Objective:

- Scale image up from (center), from 90%

- Smooth animation even when timing is slower

 

I tried applying force3d but to no avail.

 

Any ideas on how to best accomplish this?

Thanks!

See the Pen AigpI by jonathan (@jonathan) on CodePen

Link to comment
Share on other sites

Trick here is to use a child element with css transitions/transforms...and overflow hidden on the parent element.

 

See the Pen 90c24e1a0ae15bf9e561413fcde8d7ba by sgorneau (@sgorneau) on CodePen

 

***EDIT: I really need to refresh the page before I submit a post ... Diaco was all over it :)

  • Like 3
Link to comment
Share on other sites

Hi,

 

As Diaco and now Shaun have tackled this issue, the problem here is sub-pixel rendering. Background size and position are forced to integer values, while scale and translates (in Shaun's codepen) can be set to decimal values, which generates a smoother animation.

 

This actually is a browser thing and not GSAP related, so my advice is to use their approaches to solve this.

 

Happy Tweening!!

  • Like 3
Link to comment
Share on other sites

I guess i was late to the party again.. But here is a previous codepen i made from a previous GSAP post called: Tweening backgroundSize property problem for IE9+

 

It uses background-size  and autoRound:false  as Rodrigo explained above:

 

See the Pen AigpI by jonathan (@jonathan) on CodePen

 

Above example works in Chrome, Firefox, Safari, IE9, IE10, and IE11:
 

Also best to use relative values with autoRound:false for a more smoother animation

TweenMax.to($img, 10, {
  backgroundSize: "+=25% +=25%", 
  autoRound:false, 
  ease:Power1.ease0ut
});

autoRound  is part of the CSSPlugin

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

autoRound

By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you'd rather disable that behavior, pass autoRound:false in the css object. You can still use the RoundPropsPlugin to manually define properties that you want rounded.

If you need to animate numeric attributes (rather than css-related properties), you can use the AttrPlugin. And to replace the text in a DOM element, use the TextPlugin.

 

MDN background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

 

Hope this helps :)

  • Like 3
Link to comment
Share on other sites

Hi guys, thanks so much for the tip, it smoothes out the transition for sure. But now I have this problem on Chrome + Safari (Firefox it looks good).

Looks like the border radius is being ignored during the scaling. Any ideas how to fix this?

 

See the Pen fd6af785bd28ce552e17e93e759047c4 by dada78 (@dada78) on CodePen

 

Thank you!!

Link to comment
Share on other sites

  • Solution

Hah, I found the fix...Out of all the solutions posted the one from tNick Spiel:https://css-tricks.com/forums/topic/chrome-webkit-border-radius-bug/page/2/

 

"The following applied to the parent element with the border radius applied to kick webkit back into line for me:"

-webkit-mask-image: -webkit-radial-gradient(white, black);

worked for me! :-)

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