Manipulating multiple elements using one ScrollTriggers breaks animation

[TejaL]

Hi, this is my first post and I made sure to try to follow all the guidelines and look up solutions before posting but I apologise if there's anything I missed.   

 

So I have multiple rows of elements, and in my actual project I'm manipulating the individual colored divs, but here thought I should makes it simpler since I'm getting the same effect, which is whether it's using a forEach or multiple scrollTriggers, having it try to manipulate 2 elements breaks both, the first one works fine until the 2nd gets triggered, which resets both to their initial "from" values, but the 2nd never actually runs normally.  

 

This of course doesn't happen if you just use the "from"/"to" on "section" and have it apply to all, but I want to give each one different values.

 

 

See the Pen NPWBMaV by Teja-L (@Teja-L) on CodePen.

[mvaneijgen]

Hi @TejaL welcome to the forum!

 

There is a logic issue here. You are currently looping through each section, but in both loops you target all .float-div elements. So I would figure you  want to create two tweens, one for the blue boxes and one for the red boxes. But currently you're creating four tweens. Two for the red boxes and another two for the blue boxes and two ScrollTriggers that control them both. 

 

I've update your code to target just the current section and have an if statement to check which is which.

 

I should also note that it is good practice to never animate your trigger element. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

Hope it helps and happy tweening! 

 

See the Pen dPyjwxj?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[TejaL]

Thank you so much for your feedback and help. 

 

I wasn't intending on having the trigger element animated, it isn't in my project, just creating the demo I did it like that to minimise the code since I was getting replicating the issue so I thought no need to complicate it.

 

In my project I'm actually animating each box individually, I found a solution/workaround yesterday a bit after creating this topic, but I have it so it's 2 separate timelines with their sets of tweens, but I wanted to know which would be better, as a code and performance wise, since if I have like, 5 sections, each have 5-6 animated (varied animations) elements, I feel like that will bloat the code too quickly.

 

I use NextJs so I could have each section as its own component file and have each timeline there, but that wouldn't solve any performance issues if it's better to do it the forEach route? 

 

Below is a demo of it the way I have it working now. 

 

See the Pen OPJobJY by Teja-L (@Teja-L) on CodePen.

 

[mvaneijgen]

Totally fine way of doing this, but this would get out of hand when there are too many different sections with different timings. You've already found the toArray method, I would check out all the utils functions! https://gsap.com/docs/v3/GSAP/gsap.utils/

 

Here is a quick setup where we just animate all the boxes in a given section and then use the wrap function to give them all a different angle and use the stagger https://gsap.com/resources/getting-started/Staggers/ property to animate them in one by one.

 

In the below example we only set the rotation, but I hope you can see you can apply this to any property and then do something similar as my initial demo where you check what index the container has and then slightly tweak the values or even apply some randomness to all values, so that for each section all values are slightly different.

 

Hope it helps and happy tweening! 

 

See the Pen vEYzmKQ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[TejaL]

Thank you so much, that is definitely a much cleaner and streamlined way of doing it, and I didn't know about the wrap method which makes things quite a bit easier. I definitely need to read more of the docs, but there are many possible methods and uses that it can get quite overwhelming.

[mvaneijgen]

Yeah I know what you mean. But giving the docs a once over is a great idea. You don't have to know everything after reading it, but it might help you in the future when you need to do something and remember something that might help you in the docs.

 

Good luck with your project!