Greensock Loader + Background Image Change

[phillip_vale]

Hi,

 

I have a div with changing .gif backgrounds working but when i run it on a live site the gifs glitch or don't play because the gif aren't preloaded i'm guessing.

 

To break what i'm trying to achieve into steps it would look like:

 

1. Loading animation (3 squares fading in) while gifs are preloading.

2. Loading of gifs completes and loading squares finish with all three visible.

3. #main div fades up with preloaded gifs playing.

 

Any help is much appreciated, thank you.

 

Phil

See the Pen jOzMNry?editors=0010 by phillipanthonyvale (@phillipanthonyvale) on CodePen

[GreenSock]

I think you could simplify your code a lot. For example:

// long
var loader = gsap.timeline({repeat: -1});
    loader
    .from("#load01", {opacity: 0, duration: .5})
    .from("#load02", {opacity: 0, duration: .5})
    .from("#load03", {opacity: 0, duration: .5});

// short
gsap.from("#load01, #load02, #load03", {
  opacity: 0,
  repeat: -1,
  stagger: 0.5
});

I would structure things differently too - just use an Array of URLs, and then use a recursive function and a delayed call to set the images. You really only need to wait for the first one to load (unless the others would take longer than 2 seconds each to load). No need for jQuery either. Here's what I'd probably do: 

 

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

 

I hope that helps. 

[phillip_vale]

Thank you so much for the help Jack. I have a lot to learn.