Logo Stagger Reveal
Loading "Adding Stagger Reveal to Animations"
Run locally for transcripts
π¨βπΌ Add a "stagger" effect to the logo tiles animation. The very first slide should animate immediately on page load, and every subsequent tile should have a delay increasing with each tile.
π¨βπΌ The duration of the delay between each tile is up to you. Try a few different values out!
π¨βπΌ If you feel uninspired, I personally think that
0.07s work really well as an incremental delay.π¨ Add an
animation-delay CSS property (do it inline with an arbitrary property).π¨βπΌ Try implementing the stagger with the least possible amount of JavaScript. We're going for a CSS-based reveal stagger here!
Getting each tile's "rank" βΒ some interesting facts
It would be quite handy to have a way to know which "rank" each tile is in. For example, the first tile would be rank 1, the second tile would be rank 2, and so on.
CSS is capable of knowing which
nth-child an element inside a list is... so surely we should be able to access this information?Well... unfortunately, no. Not yet.
Bummer βΒ that would be really handy here!
This would be extremely handy for our exact use case here!
CSS counters() function
There is another rabbit hole to exploreΒ β π CSS counters()
Long story short βΒ you cannot use those within a
calc() CSS function, which is how we'd calculate our stagger delay.Oof! π
Using the .map() loop index
I know, I know. Peter the Product Manager said to use as little JS as possible. Based on the info above, looks like borrowing the "rank" info for each tile based on the loop index is... a good trade-off.
The
Array.map() function (which we already use to loop over the logos) has a second argument that is the index of the current item in the array:logos.map((logo, index) => {
// index is the current index of the logo in the logos array
})
π° I'll let you use your imagination on how you can use that loop index to create a stagger. A few pointers:
- You cannot create dynamic classes like
[animation-delay:${0.1 * index}s]in Tailwind, due to π the way the CSS from Tailwind is compiled. - if you find a way to "pass" that index to CSS, you can use it in a
calc()function that looks something likecalc(0.1s * index)π - you can use a
styleattribute to define a π CSS variable, which you can then... use in CSS!