Jump to content
GreenSock

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

Tween body background image

Go to solution Solved by Jonathan,

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

Hey guys,

 

I was wondering, is it possible to tween the body background image? I know you can on other divs (or I guess more precisely you tween the whole dom element) but with the body everything seems to tween BUT the background image. I've tried both opacity and autoAlpha, and any dom elements within the body tween fine, but the background image is visible on load. Any way to do this? If not, no biggy. I just wanted to keep my code cleaner and avoid having a fullscreen img tag hanging around in my HTML.

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

Link to comment
Share on other sites

  • Solution

Hello Kathryn,

 

You really should not be animating the body tag even if it is just opacity (autoAlpha), since that will give you mixed, crazy, and inconsistent results cross browser.

 

The body tag is really only good if you are removing and adding classes or changing background-position. But i would never animate the body tag, but only a child of the body tag. This way you make sure you get consistent animations cross browser.

 

If i were to do this, I would just create 2 divs one as the main container with position relative. And a child div with position absolute, and add the background image on that. Setting the body and html tag to be height 100% so your #stuff div can inherit the height from its parents the html and body tag.

 

Try this:

 

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

 

:)

  • Like 5
Link to comment
Share on other sites

Thanks Jonathan, I didn't realize tweening the body could cause issues like that. Good to know! :)

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