Change background images after each animations

[bootstrap007]

Hi,

 

I am looking to change the background images after each animations like in the CodePen. As you can see that 1st background Image is appeared then the 2 boxes are also animated and then the background image fades out from the page.  Until there it is working fine. But after the 1st background is disappeared then the 2nd background image is not appearing before the 2 boxes animation starts again. How can I achieve this kind of thing? 

 

Thanks in Advance

See the Pen gObJEGK by bootstrap007 (@bootstrap007) on CodePen

[ZachSaucier]

Hey bootstrap.

 

The second background is fading in just as you are telling it to - it's just positioned outside of the screen's viewport (i.e. scroll down). So you just need to make sure it's visible. 

 

There are several ways to do this. You could change the display of the first background image to none after its animation is done. Or you could use a single element and just change its background (so that it's always positioned correctly). 

 

A few other notes: 

• Most likely don't need to include the prefixes for background-size because the unprefixed property been supported in browsers for a long time now (caniuse is great for checking things like this).
• You should use classes to reduce the number of times that you repeat yourself in your CSS (and JS at times). 
• We highly recommend using GSAP 3's new syntax. This includes the string form of eases, a simplified API, and including duration inside of the vars parameter.
• You can make use of GSAP's defaults to save you a bit of code as well.

Altogether it looks something like this:

See the Pen LYEKYdL?editors=0010 by GreenSock (@GreenSock) on CodePen

[bootstrap007]

Hi  ZachSaucier,

 

Oh! My bad. I didn't notice the 2nd background was going outside of the screen. 😃Well noted all the points and you have explained in detail. Thank you so much for the continued support. 👏👏👏