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.

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

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.

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?

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?

Thanks so far. I've modified my script (added triggerHook: 1 and duration: '100%'). Now my parallax-item starts to move as soon it does hit the viewport. But if you keep on scrolling, it does immediately stop as soon the trigger 1 reaches end 1. On this page the image keeps on moving until it is completely out of the viewport. How can I achieve this? Check out the current attempt: https://codepen.io/ItsLefty/pen/wVGYmw

Hi there! I'm trying to create a scrolling effect like this: Scroll / Parallax effect If you scroll the page down and the image is in the viewport, it will receive a dynamic translate3d on the y-axis between 0% and max. +25% (based on scroll ). If you scroll the page up, it will be reserved (up to -25%). I'm still a JS beginner, below you can see my attempt with GASP/ScrollMagic/TweenMax. Unfortunately this is still not like in the example above. The parallax-item stops moving at a certain point although it is still in the viewport and you keep on scrolling. Moreover the speed is too fast. I guess I have to modify the offset and duration ScrollMagic-Options (?) but I don't know what I should exactly do. I know that ScrollMagic and animation.gsap are not GSAP products but maybe someone can help me. Thanks in advance!