Jump to content


Collect mutliple items into array and then run gsap.to on each in order

Recommended Posts

Hi there,


Probably quite simple but how do I collect a group of sub divs into an array and then animate over them one by one in order?




  <div class="class">First Item</div>
  <div class="class">Second Item</div>
  <div class="class">Third Item</div>
  <div class="class">Fourth Item</div>

I believe you could do 


let targets = gsap.utils.toArray(".class"); 

to group them into an array


Can you then do 


const tl = new gsap.timeline();

tl.to(".class", 3, {opacity: 1})

 and it will go one by one mapping over the array to animate each one to opacity one?



Link to comment
Share on other sites

Yes you can make an array like that, if you need one, and loop over it with a tween in a function. But you can also just do the timeline without making an array. GSAP will find each element of that class name. 

  • Like 2
Link to comment
Share on other sites

Thanks. Sorry I'm going to add a scrub to it with scrolltrigger as well forgot to mention 

Link to comment
Share on other sites

No problem! Animating a single tween with ScrollTrigger is exactly where you should begin.


Watch the video in the docs 



this tutorial also will help


Also this great short video from @Cassie will help too!



Let us know where you get stuck and we'll jump in to help with your minimal demo.


  • Like 2
Link to comment
Share on other sites

Thank you 


Ok so I've made a codepen here: 

See the Pen mdLvwOX by zrrrrr (@zrrrrr) on CodePen


What I want is to have is:



You scroll down until you hit the top of the scroll container. The Main title starts to fade out. Then the first item (#seq-1) fades in to take its place. That lasts for a bit then it fades out and section 2 (seq2) fades in. then that fades out for seq 3. Then the same for seq 4 except that doesnt have to fade out at the end



I think I'm partly there but I'm getting overlapping text. I was hoping the timeline would prevent overlap?


Thank you 



Link to comment
Share on other sites

thanks for the demo. it's a start.


I think it would be best for you to focus on the animation of only 3 elements and worry about ScrollTrigger later.


Just get 3 elements to fade in and out EXACTLY as you want with 3 tweens.


Don't worry about loops or writing efficient code right now.


In your demo multiple items have the same heading and sub-title text which makes it impossible to tell what is fading in and what is fading out. Definitely change that.


However I noticed the second tween animates to opacity:1

 tl.to("#seq-2", {opacity: 1});


but I don't see that it was ever set to 0 in the css or elsewhere... so it is animating from 1 to 1.


Think of the starting state of each of the 3 headings and write specific tweens for each one.


You started this thread asking to how to animate multiple items in order and I guess we assumed you just wanted them each to do the same thing.


Now you want

  • the first item to start visible and fade out
  • second item to be invisible and then fade in and fade out
  • .... 
  • last item to fade in but not fade out


Hopefully this helps you review your code and adapt those 3 animations.


  • Like 2
Link to comment
Share on other sites

Carl you are a pure legend!


I did what you said, sat back and got the animation working as I liked properly without scrolltrigger, then added it on at the end and it worked! Thank you!!


Not sure if this is useful to anyone but codepen here 

See the Pen mdLvwOX by zrrrrr (@zrrrrr) on CodePen


  • Like 2
Link to comment
Share on other sites

So glad to hear you put in the time and achieved this result on your own!


That's the best way. I know it feels good when things finally work. Sometimes the best way to learn is just to grind it out a bit. 


Between my classes and this forum I've seen very similar questions regarding "i want to animate all these things basically the same way, but the first and/or last should be different. 


The truth is there are many ways to get the same results and some just make more sense to some people than others. Some methods are more concise and some offer more flexibility.


I'll be using this demo below for my lesson this week, but figured I'd share it with you as a little reward for your hard work.


It basically shows a variety of ways to "kind of stagger things".


Best viewed in it's own window


See the Pen mdLvXPP?editors=0010 by snorkltv (@snorkltv) on CodePen


Congrats on the progress!


  • Like 2
Link to comment
Share on other sites

Ok there's another bit to this animation which is an image sequence that runs alongside; each of the text blocks have an accompanying video to go with it.


I managed to get the videos to animate to each other in sequence without scrolltrigger, but as soon as I put scroll trigger in I had loads of issues. 


I couldn't use pin because of the css it affected the 'top' property so the images went off screen.


The sequence is: 


Main title goes to opacity 1 then opacity 0


Start first video


First text block goes from opacity 1 to 0


Start next video


Second text block goes from 1 to 0


etc etc


For some reason the only sequence that seems to work properly is the second text and video, the first one you can't even see it run, then when you get to the third one it's already finished by the time you get there. When you try to scroll back up it doesnt reset the videos and sometimes the opacity doesnt go back in sequence properly.


I've tried multiple things like pausing all 3 videos at first then playing them at the correct point in the sequence (as I thought the issue might be the next 2 videos play out as you get there as its only the opacity changing). 


I also had to set a defined end point for the scrolltrigger which I don't think is ideal either.


I don't know if there is something special that needs to be done with videos? Is the trigger set up correctly? I also looked at the onEnter callbacks etc but that didn't solve the issue


Many thanks

Link to comment
Share on other sites

Sorry, but I really can't go on offering 1 on 1 consulting on your project every time you want to add a new feature and I definitely can't try to dive into css layout issues.


However, I'll offer the following before I go.


Putting code in between lines of timeline code doesn't mean it's going to execute in that position of the timeline.

tl.to(video3, {opacity: 1})

video3.play() // this runs immediately and is in no way associated with the playback of the timeline.

tl.to("#seq-4", 3, {opacity: 1})


If you want to trigger a video to play or run any external function from a timeline you need to use call().


This is a basic example of 2 videos being triggered from a timeline


See the Pen wvjOKXR?editors=0111 by snorkltv (@snorkltv) on CodePen


Another problem is that your videos have opacity:0 in the css and I don't see you fading them in before you want them to play.


Hopefully this helps get you in the right direction. 

If you have more GSAP questions please consider a new thread with a minimal demo that clearly illustrates a single issue.


If you want to maximize what you can do with GSAP, I'd strongly suggest spending a month or 2 with training. It could really help you avoid these problems and speed up the learning curve immensely. 








  • Like 2
Link to comment
Share on other sites

Ah, I see, the .call method made all the difference, didn't know about it.


Thank you so much.


Yes definitely a good idea



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.