Ken Burns effect starting from "cover" background size

[ericshew]

Hi there,

 

I'm running into challenges with doing a Ken Burns effect type rollover. I've reviewed some of the posting and assets here but I'm unable to discover what I'm doing wrong. I am hoping that we I use a starting point of "cover" and then do a gentle zoom based on a percentage off of that. 

 

Thank you in advance for your help.

See the Pen MEvMKb?editors=1111 by ericshew (@ericshew) on CodePen

[Shaun Gorneau]

Dealing with background size can be tricky because of all the factors that determine which dimension grows due to various conditions. I would simply let the background image maintain all of its initial property values and react to the containers changing property values. Doing that means animating the element itself (for which the background image is being applied).

 

See the Pen borXNq?editors=1111 by sgorneau (@sgorneau) on CodePen

 

[edited because I typed "simply" like 74 times, like an idiot.]

[Sahil]

Slightly improved answer by forking Shaun's pen and added rotation if you mean effect like this.

 

See the Pen ZXXzqQ by Sahil89 (@Sahil89) on CodePen

 

[Jonathan]

Hello @ericshew

 

I prefer to animate the CSS scale property for Ken Burns Effect, since it gives you more flexibility. Which unlike animating width and height will not cause jank (lost frames). Width and Height trigger layout to be calculated on every render tick so you want to stay away from animating those properties. The slight rotation prevents the jank jitter bug in Firefox.

 

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

 

Also animating background-size is perfectly fine. You were missing some CSS properties like background-repeat: no-repeat, and position: absolute. But make sure your image matches the size of your container image. As well as having a parent container. But all that is necessary to make full cross browser animation using background-size.

 

You can see here CSS background-size being animated here:

 

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

 

Also @Sahil keep in mind that in GSAP rotationZ is the same as rotation

 

Happy Tweening

[Sahil]

Ya I used to use rotation only, then noticed someone using rotationZ explicitly, thought it is right way to do it. 

[Jonathan]

You can use either or, GSAP will know what you mean!

[ericshew]

Wow! Thanks for all of the help everyone! I was able to get this done and the results are looking really good. I really appreciate Greensock and this community.  I am learning a ton. 

 

Thanks again!