Jump to content
Search Community

Greensock Loader + Background Image Change

phillip_vale test
Moderator Tag

Recommended Posts



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.



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

Link to comment
Share on other sites

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

// long
var loader = gsap.timeline({repeat: -1});
    .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. 

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.
  • Create New...