Jump to content
Search Community

Timeline delay

Vahan0799 test
Moderator Tag

Recommended Posts

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

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

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.

:)

 

 

 

  • Like 3
Link to comment
Share on other sites

@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

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.

:)

 

  • Like 2
Link to comment
Share on other sites

@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

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...