GSAP Stagger Reveal + LazyLoad + IE Fallback

[Its_Lefty]

edit: updated with example

 

Hi there!

I'm currently developing a website with a stagger reveal function on scroll for the divs and images. I came across this thread 

and this is working nice.

 

But I need to modify this. My goal:

• the columns fade-in from the bottom in a sequential animation like the example above
• the images will only load as soon they are in the viewport (using the IntersectionObserver) so I've added a lazy-loading-script

 

Explanation for my JS below:

• the first function in the JS is the GSAP stagger reveal animation (like in the example from above). The columns fade in from the bottom in a sequential animation.
• at the bottom of the JS I initialize the lazy-loading script lozad.js (it has also incluced a polyfill for older browsers): https://apoorv.pro/lozad.js/
   

Issues:
 

1.) I think it would be wise to wait for all images to load before the sequential animation starts, right? Is this possible? Unfortunately I don't know how. 
 

2.) The images and columns stay invisible on the Internet Explorer due to the use of "forEach" from the stagger reveal script. Since my JS knowledge is limited, I don't know how to re-write the code. Maybe there is an elegant way to combine the stagger-reveal-function with the lozad-lazy-loading?
 

See the Pen eYOpROp by ItsLefty (@ItsLefty) on CodePen

[ZachSaucier]

Hey Lefty and welcome. 

 

On 8/11/2019 at 6:59 AM, Its_Lefty said:

My issue right now is that the images won't load on the ****** Internet Explorer

What is causing them not to load? Is it a JS issue with the lazy loading script that you copied?

 

On 8/11/2019 at 6:59 AM, Its_Lefty said:

Unfortunately I am struggling with combining these 2 scripts together since I'm a total JS beginner.

Can you please create a minimal demo of your issue that you're facing when combining the two scripts in something like a CodePen for us to see and debug? It's pretty hard to help blind  

[PointC]

Did you see this section in the article?

 

Quote

 

Adding a fallback for unsupported browsers

As mentioned the Intersection Observer API is not supported in Internet Explorer or as of yet Safari, so as a fallback we can check if the API is supported by the browser using if ('IntersectionObserver' in window), and if not we just load all the images automatically using our preloadImages function, but if it is supported we then use our Intersection Observer.

 

 

[Its_Lefty]

Below is my attempt. The first function in the JS is the GSAP stagger reveal animation (like in the example from above). The columns fade in from the bottom in a sequential animation.
At the bottom of the JS I initialize the lazy-loading script lozad.js (it has also incluced a polyfill for older browsers): https://apoorv.pro/lozad.js/
 

Issues:
 

1.) I think it would be wise to wait for all images to load before the sequential animation starts, right? Is this possible? Unfortunately I don't know how. 
 

2.) The images and columns stay invisible on the Internet Explorer due to the use of "forEach" from the stagger reveal script. Since my JS knowledge is limited, I don't know how to re-write the code. Maybe there is an elegant way to combine the stagger-reveal-function with the lozad-lazy-loading?
 

[ZachSaucier]

1 hour ago, Its_Lefty said:

I think it would be wise to wait for all images to load before the sequential animation starts, right?

Do you mean all images in the row that is about to be revealed, or all images? I hope the first because otherwise there's not too much point in lazy loading them. 

 

In terms of how to wait for the images to load, there are different techniques you could use. The first that comes to mind for me is to add the images that should be revealed to an array. Then check to see if all of those images that should be revealed have loaded (by checking if they have the loaded class). If they have, animate them in. If not, you could use a GSAP's delayedCall to wait to check some period later and animate them if they've been loaded then. 

 

Does that make sense?

 

1 hour ago, Its_Lefty said:

The images and columns stay invisible on the Internet Explorer due to the use of "forEach"

A forEach is just a handy method to iterate through a list. You could just use a for loop like this to replace it:

 

for (var i = 0; i < boxes.length; i++) {
  boxObserver.observe(boxes[i]);
}

Or, since you're using jQuery already, you could use jQuery's .each() method like you're doing in the else.

[Its_Lefty]

5 minutes ago, ZachSaucier said:

Do you mean all images in the row that is about to be revealed, or all images? I hope the first because otherwise there's not too much point in lazy loading them. 

 

In terms of how to wait for the images to load, there are different techniques you could use. The first that comes to mind for me is to add the images that should be revealed to an array. Then check to see if all of those images that should be revealed have loaded (by checking if they have the loaded class). If they have, animate them in. If not, you could use a GSAP's delayedCall to wait to check some period later and animate them if they've been loaded then. 

 

Does that make sense?

 

A forEach is just a handy method to iterate through a list. You could just use a for loop like this to replace it:

 

for (var i = 0; i < boxes.length; i++) {
  boxObserver.observe(boxes[i]);
}

Or, since you're using jQuery already, you could use jQuery's .each() method like you're doing in the else.

Thanks a lot, the reveal is now working in the IE as well.
 

Yes, I mean all images in the row that are about to be revealed (not all images). Or do you think that the lazy-loading-part is nonsense nonetheless (if using a sequential animation)?

The checking for the loaded class and delayedCall looks promising. I'm still new to JS and GSAP so this is over my knowledge. I will try to find an example.

[ZachSaucier]

Just now, Its_Lefty said:

Yes, I mean all images in the row that are about to be revealed (not all images). Or do you think that the lazy-loading-part is nonsense nonetheless (if using a sequential animation)?

No, I don't think it's nonsense, especially if you have a lot of rows of images (it's probably not worth your trouble if you only have a couple of images). 

 

1 minute ago, Its_Lefty said:

I'm still new to JS and GSAP so this is over my knowledge.

Look at each part of what I said individually. Try to think how that piece would look in JavaScript. That's the best way to get better at programming  

[Its_Lefty]

Wouldn't it be possible to just extend the

if (entry.isIntersecting

 condition?

I've tried it with

if (entry.isIntersecting && $(observer).hasClass("loaded")) {

but it is not working. I guess it's not possible without an array? Sorry for being such a newbie

[ZachSaucier]

6 minutes ago, Its_Lefty said:

I guess it's not possible without an array?

Your approach would only work if the images are loaded before the intersection occurs. In the case that the intersection occurs and the images aren't loaded, there is no logic to tell the browser to check again later if the images have loaded since the intersection.

 

So if a user scrolled down to where the images should show but they're not loaded, they would never show (unless they scroll again and the intersection observer event fired again after the images had loaded).

 

That's why you've got to use an approach more similar to the one I outlined above.

 

8 minutes ago, Its_Lefty said:

Sorry for being such a newbie

We were all newbies at some point! No reason to be sorry. 

[Its_Lefty]

Okay, this makes sense, thanks!

 

Unfortunately I couldn't find similar approaches like the one you have proposed and after several hours of trying, I feel like my JS skills are not good enough to realize this at the moment. Maybe someone can help me with the solution.
If not, it's fine though, since it's just a personal project. I can get rid of the lazy loading and use imagesLoaded instead.