Animation delay on my collection list

Design help Animations & Interactions
1

I have create a component called profile card that contains Image, name and role.
I added 6 profile to my list and I linked it to collection list. Now What I want, that animate 6 card with 0.5s animation delay. for example first card animate from left to right fade-in effect, 2nd card animate same way but after 0.5s delay.

Actually, I’m doing practice for making site in Webflow.
here is reference site called “nerko”

Here is my public share link: [LINK]

2

Hi there,

Adding reveal on scroll animations to your profile cards can create an engaging visual experience for your visitors. Here’s how to set it up:

  1. Select your profile card element and open the Interactions panel
  2. Add a “Scroll Into View” trigger
  3. Create an animation with Move and Opacity actions - set initial state with 50px y-axis movement and 0% opacity
  4. Animate to 0px movement and 100% opacity
  5. Under “Affect” choose Class to apply this to all elements with the same class

For more detailed guidance, check out our reveal elements on scroll lesson in Webflow University.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

@espark_vala

1. Create Animation in Webflow

Go to Interactions panel (lightning bolt icon) and:

  • Select any collection item (like a profile card).
  • Go to “Element trigger” → “While page is loading” (or “While scrolling into view” depending on your goal).
  • Choose “Scroll into view” → Select “Affect: Class” and apply it to “Only children with this class”.
  • Create a new animation, e.g., “Card Fade In Left”

2. Inside the Animation:

Set up these keyframes:

  • Initial state:
    • Opacity: 0
    • Move: X = -30px (to the left)
  • Final state (Add keyframe):
    • Opacity: 100%
    • Move X = 0px
    • Easing: ease-out
    • Duration: 0.5s

This gives the left-to-right + fade effect.

Add Delay Based on Order (Manual Staggering)

Webflow does not natively support CMS-based staggered animations, but here’s how to simulate it:

Use nth-child CSS animation delay via custom code

1. Give Your CMS Item a Class

Give the parent CMS item (e.g. profile card) a class like profile-card.

2. Add This Code to Page Settings → Before </body>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const cards = document.querySelectorAll('.profile-card');
    cards.forEach((card, index) => {
      card.style.opacity = '0';
      card.style.transform = 'translateX(-30px)';
      card.style.animation = `fadeInLeft 0.5s ease-out forwards`;
      card.style.animationDelay = `${index * 0.5}s`;
    });
  });
</script>

<style>
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
4

Thank you for your big help, But I’m beginner so I wish to go with free version not paid one. So free version not allow any custom code.

5

Yes I tried this one also but it was animate all at same time, I want to set with delay.
see below Image for better understanding,

image
image1884×806 153 KB