Scaling backgroundSize issues

[dada78 35 Likes (Newbie)]

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

[Diaco 1,999 Likes (Superhero)]

Hi dada78 

 

pls try like this : 

See the Pen GJLVQq by MAW (@MAW) on CodePen

[Shaun Gorneau 2,037 Likes (Superhero)]

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

[Rodrigo 5,914 Likes (Superhero)]

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

[Jonathan 5,394 Likes (Superhero)]

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

[dada78 35 Likes (Newbie)]

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

[dada78 35 Likes (Newbie)]

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!