Animating DIVs one after each other when scrolled into view

[le_kiki]

Hey everyone,

 

Firstly, I just want to say how much I love these forums and the culture of assistance here!! I've come here so many times to find answers and tips for heaps of projects (though this is my first post), so thank you everyone for your contributions!

 

I can't seem to find a solution for this question... I'm still learning and would love to learn HOW I can implement what I want

 

I want to animate a set of DIVs with the class "each-client" one after each other, when the user scrolls them into view.

 

Below is my current code, which works perfectly except it happens right away and not when scrolled into view.

 

var client = $(".each-client")
for (i=0; i<client.length; i++) {
 tl = new TimelineMax({delay:i*0.2});
 tl.from(client[i], 1, {opacity:0})
 tl.to(client[i], 1, {opacity:0.4});
}

 

I have code that i've previously used to Tween DIVs when scrolled into view, so have tried to combine those two snippets together and have gotten the following:

 

		document.addEventListener("DOMContentLoaded", function(){
    			var documentElement = document.documentElement;
                //Page height
                var targetPosY = document.body.scrollHeight;
                var client = $(".each-client") 
					for (i=0; i<client.length; i++) {
 						tl = new TimelineMax({delay:i*0.2});
 						tl.from(client[i], 1, {opacity:0})
 						tl.to(client[i], 1, {opacity:0.4});
						};

                window.onscroll = function (event) {
                  ( !! window.requestAnimationFrame) ? requestAnimationFrame(onScroll) : onScroll();
                }
                               
                function onScroll(){ 
                      var top =  Math.max(Math.min(window.pageYOffset || documentElement.scrollTop, targetPosY), 0); 
                      if(top <= targetPosY){
                          var progress = (top / targetPosY);
                          Array.prototype.forEach.call(client, function(tween){
                              tween.progress(progress);
                            });
                      }
                }                               
              });

As you can probably tell it doesn't work as I want it to.... it does animate each "each-client" instantly as if all of the onScroll code is just not working.

 

As I am learning and not just looking for a "fix" it would be soooo appreciated if someone could explain to me why the above wouldn't be working and possibly what I have done wrong here 

 

Also here is a CodePen of this:  (I have commented out a big dummy scrolling section so you can first see the animation and remove this if you want to test scrolling)

See the Pen mdeqKNz by kiaramelissa (@kiaramelissa) on CodePen

[ZachSaucier]

Hey le_kiki and welcome to the forums!

 

11 hours ago, le_kiki said:

I just want to say how much I love these forums and the culture of assistance here!! I've come here so many times to find answers and tips for heaps of projects (though this is my first post), so thank you everyone for your contributions!

Thanks so much for saying this! We're so glad that it has ben helpful to you. 

 

11 hours ago, le_kiki said:

Below is my current code, which works perfectly except it happens right away and not when scrolled into view.

 

var client = $(".each-client")
for (i=0; i<client.length; i++) {
 tl = new TimelineMax({delay:i*0.2});
 tl.from(client[i], 1, {opacity:0})
 tl.to(client[i], 1, {opacity:0.4});
}

This might have been how we recommended to do it back in the days of GSAP 1.x or something. Now GSAP has an easier way of doing this sort of things: staggers! I highly recommend watching the video and reading the info on the page that I linked to, but you could do the above in GSAP 3 like so:

const tl = gsap.timeline({defaults: {duration: 1, stagger: 0.2}});
tl.from(".each-client", {opacity: 0});
tl.to(".each-client", {opacity: 0.4}, 1);

Or even:

gsap.set(".each-client", {opacity: 0});
gsap.to(".each-client", {
  defaults: {duration: 1, stagger: 0.2},
  keyframes: [
    {opacity: 1},
    {opacity: 0.4, delay: 1}
  ]
});

 

11 hours ago, le_kiki said:

I have code that i've previously used to Tween DIVs when scrolled into view

Detecting whether or not an element is in view using the scroll position like that is at the least messy. The more modern way to do this sort of thing would be to use the intersection observer API. 

 

Or soon you'll be able to use a scroll plugin that GreenSock is making  It will be even more powerful and easier to use than the intersection observer API. It's currently in private beta.

 

11 hours ago, le_kiki said:

As you can probably tell it doesn't work as I want it to.... it does animate each "each-client" instantly as if all of the onScroll code is just not working. ... it would be soooo appreciated if someone could explain to me why the above wouldn't be working and possibly what I have done wrong here 

Unfortunately it's not worth my time to figure out why your logic isn't working. Rather, I'll show you how to do it the more correct way using an intersection observer (with comments):

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

 

Feel free to ask whatever questions you have about this approach  

[le_kiki]

Hey @ZachSaucier 

 

Thank you so so much for your reply! Totally understand re: easier to create the solution and I ask any questions from there, and I so appreciate that.

 

I'll take a look through and have a read about the Staggers and Intersection API and let you know if I have any questions, but it looks like there is lots of information there to go on. This is so fun to learn!

 

I'm also going to re-do that old code I was using to detect the scroll and use the Intersection Observer API instead