Jump to content


Tweening multiple CSS3 background images

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

This is my first question as I am a long time lurker of this forum..


In CSS3 we can use multiple background  as described in this CSS snippet:

#some-image {
   background-image: url("img1.png"), url("img2.png");
   background-position: 0px 0px, center;

However, after digging the documentation I cannot find anything to tween one of the multiple background. I can tween a background image if the HTML element only using  single background. With multiple background, i have no luck..


Do I miss something here? Or does GSAP not support this feature yet?


Many thanks for the effort..

Link to comment
Share on other sites

Hello and Welcome to the GreenSock Forums!


Do you have a limited

See the Pen by pen (@pen) on CodePen

or jsfiddle you can provide so we can see the code you have tried that isnt working or see what your code looks like.. so we can better help you.


thx :)

Link to comment
Share on other sites

That's correct - animating multiple background-images is not supported in GSAP by default, although you could certainly accomplish it with either your own plugin or by using a generic object and an onUpdate to apply the values that you're tweening in the generic object. 

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.