Jump to content
Search Community

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

dogzzz test
Moderator Tag

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?

 

ie: 

 

<div>
  <div class="class">First Item</div>
  <div class="class">Second Item</div>
  <div class="class">Third Item</div>
  <div class="class">Fourth Item</div>
</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?

 

Thanks

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 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

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

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. 

 

Best,

 

Carl

 

 

 

  • Like 2
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.
×
×
  • Create New...