Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Tweening multiple CSS3 background images

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