Jump to content


Ken Burns effect starting from "cover" background size

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

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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


  • Like 2
Link to comment
Share on other sites

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

  • Like 6
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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! 

  • Like 6
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.