Delay animation for elements on the same row

Hey guys!

For the team bios grid on this site, I used the default “slide up” animation. The client would like for the 3 profiles in a row to be delayed a little instead of the entire row sliding up at the same time. Any ideas how to accomplish this? I tried googling how to use a pseudo class to target the 2nd and 3rd elements in a row, but I’m out of my depth there…

Thanks,

Jose


Here is my public share link:https://preview.webflow.com/preview/jhm?utm_source=jhm&preview=58e87d7705ae5e6c6511c5df297d58ab

I am pondering a similar goal. I have a horizontal scroll row and I want to add an effect to each item as it scrolls through the 30vw zone. Was hoping to do this with one ix applied to a class.

Hi, i need same feature, maybe on all projects. When i have 6 blocks in row, i have to setup each separately, instead of one with simple delay.

Any advice from more experienced webflow’s users? :slight_smile: Thanks.

Hi, I’m trying to do this too. From the lack of replies, it looks like I have to put a separate delay on each element to get them to float into place in sequence. A ‘class delay’ would be a good option.

1 Like

Hello everyone!

I stumbled across the same situation and after some experimentation I found a decent solution that doesn’t require creating an independent animation for each item to have the delay effect.

The solution is basically giving each item a different offset, the higher the offset, the longer the ‘delay’. Sure it’s not the perfect solution, but it saves time.

Hope it help!

What do you mean by different offset?