Vahan0799 Posted May 29, 2022 Share Posted May 29, 2022 I'm using 1 timeline to animate 2 squares here. Square should go from white to gray, as it is. But my issue is, first square should go from white to gray and hold for around 3 seconds, then change the color back to white, and timeline should pause for 2 seconds then 2nd square start doing the same animation as first did, is it possible to do, or i need 2 seperate timelines for them? Thanks for the attention! See the Pen RwQQygW by VahahBio (@VahahBio) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted May 29, 2022 Share Posted May 29, 2022 Hi @VahanBio Welcome to the forum. If I understand your question correctly, I don't think a timeline is even necessary here. A stagger tween should work just fine. See the Pen f8f607798c9c5660053574b2ad3202ad by PointC (@PointC) on CodePen Hopefully that helps. Happy tweening. 3 Link to comment Share on other sites More sharing options...
Vahan0799 Posted May 29, 2022 Author Share Posted May 29, 2022 Hi @PointC YES! This was exactly what I was looking for! But I have a couple of questions which cause this solution. I'm about to use this in complicated strcuture. It's gonna be a Chessboard, where white squares will turn into black, and after black into white. It's gonna be like <div class="chessboard--container"> <div class="chessboard--square"></div> <div class="chessboard--square"></div> <div class="chessboard--square"></div> <div class="chessboard--square"></div> </div> <div class="chessboard--container"> <div class="chessboard--square"></div> <div class="chessboard--square"></div> <div class="chessboard--square"></div> <div class="chessboard--square"></div> </div> And I'm gonna need to get access them like .chessboard--container:nth-child(odd) .chessboard--square:nth-child(even){} .chessboard--container:nth-child(even) .chessboard--square:nth-child(odd){} Would that snippet work for this case? And could you explain a little bit or guide a link, why you gave a negative `repeat` outside the stagger and repeatDelay value inside stagger? I've only read documentation about 'Stagger' and haven't used it yet. Thanks for the help a lot Link to comment Share on other sites More sharing options...
PointC Posted May 29, 2022 Share Posted May 29, 2022 Yes, you can use nth-child selectors like that in tweens. If you prefer, you can assign them to an array variable before tweening as well. It's entirely up to you. I used a repeatDelay inside the stagger object because I understood that to be the goal. Each target would yoyo repeat with that delay before the next one animates. The dur variable has the pause added to it so there is an extra 2 seconds before the next element animates as well. 15 minutes ago, VahanBio said: why you gave a negative `repeat` outside the stagger The -1 infinite repeat is for the whole timeline. You had a -1 repeat as a default in your original demo so I wasn't sure if that was the goal or not. It's not necessary at all to make this work. More info about stagger: https://greensock.com/docs/v3/Staggers Happy tweening. 3 Link to comment Share on other sites More sharing options...
Vahan0799 Posted May 29, 2022 Author Share Posted May 29, 2022 @PointC This is the last question, I promise 😅 Here I tried to use your tip, but I've digged around 2-3 hrs to try and figure out, how to animate all black squares together, after end delay for 2 seconds and start white squares and so on. But seems `Stagger` animates all the elements one by one, instead of all together 😕 To make the code easier and cleaner, i tried to give 'white' and 'black' classes to each square to combine the animation of those somehow, but still no progress, mind to check what am I doing wrong here? Long story short, for ex. I need all squares of 1 color to animate first, after the end stop and begin the other and so on and yet can't figure out 😕 See the Pen GRQQwbK by VahahBio (@VahahBio) on CodePen Thanks again for support.💓 Link to comment Share on other sites More sharing options...
PointC Posted May 30, 2022 Share Posted May 30, 2022 I assume you mean all the black tiles in sequence and then all the white tiles in sequence, correct? If so, you can put them on a timeline. Something like this should work. Note: I used a shorter duration and pause just so you can quickly see what's happening. See the Pen 4d48b882af5b14f2b2ea0f8b91b59df3 by PointC (@PointC) on CodePen Is that what you needed? Happy tweening. 2 Link to comment Share on other sites More sharing options...
Vahan0799 Posted May 30, 2022 Author Share Posted May 30, 2022 @PointC Unfortunately not, they should light up all at the same time, not one by one. I think stagger animates elements one by one 😕 I've managed to do this in CSS, but there is no delay between shifting the square animations. I want to get this same thing with GSAP but can't figure out how to stop first animation while 2nd has begun and restart it once 2nd is done and so on infinite. This CodePen is exactly what I'm trying to achieve with GSAP, but with delay in between of '.white' and '.black' animation toggles. See the Pen GRQQwbK by VahahBio (@VahahBio) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 30, 2022 Share Posted May 30, 2022 Like this? See the Pen GRQxpJX?editors=1010 by GreenSock (@GreenSock) on CodePen It might be helpful to check out the getting started guide to get an overview of timelines, tweens and the position parameter. Happy tweening! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now