Its_Lefty

@mikel Thanks. I've tested it by forking your pen and setting a higher threshold but it won't help if multiple elements are in view. The animations all start at the same time. Unfortunately maxing up the heights of the sections is not an option. So I guess I need to use the tweenFromTo option like @ZachSaucier suggested. I've tried using it by forking mikels pen, see my result: https://codepen.io/ItsLefty/pen/yLNjONN There is something wrong but I don't know the issue. Thanks for any help!

Wow, thanks a lot! Especially with the animating border height. I was also planning to add this after fixing my issue. So I guess my mistake was not using the timeline options at all, I need to get a closer look into the docs. Unfortunately there is no more staggering of the items, if you see multiple sections at once in the viewport. Is this possible or do I need something like ScrollMagic for that?

Hi there! I'm working on creating an animated timeline. At first I was using the Intersection Observer only but I've just added GSAP in order to have more control of the animations. Below you can see my attempt. The issue is that the viewport is being ignored, all animations fire although they are not in the viewport I have set a threshold of 1 but it looks like it is not helping. What is the issue here? Thanks for any help! edit: New CodePen below

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 d

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 anima

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.