Tween body background image

[kathryn.crawford]

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

[Jonathan]

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:

 

 

[kathryn.crawford]

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

[jimeast]

This is something I've been working on. 

See the Pen QyxPXK?editors=1010%C2%A0 by jimeast (@jimeast) on CodePen

it just uses a couple of lines gsap inserted at the end of a block of JS I found elsewhere.