CODEWITHSUNDEEP
javascriptreactjslistanimation
Zameer Haque
Zameer Haque

Reputation: 414

Using react-spring to render a list of posts sequentially

So I have a blog created with gatsbyjs. Using react-spring I want to render the posts with some animation with the animation being applied sequentially and not simultaneously on all the posts. What I try to do is map over all the posts and return the post after some delay. Now this is not working as expected. Here is the relevant portion of code:

  <ul style={{ listStyle: "none", marginLeft: "0" }}>
    <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
      {styles =>
        nodes.map(({ node }, i) =>
          setTimeout(
            () => (
              <StyledCard style={styles} key={i}>
                <Link to={node.fields.slug}>
                  <Header>{node.frontmatter.title}</Header>
                  <Paragraph>{node.excerpt}</Paragraph>
                </Link>
              </StyledCard>
            ),
            1000
          )
        )
      }
    </Spring>
  </ul>

Upvotes: 1

Views: 1209

Answers (1)

hpalu
hpalu

Reputation: 1435

You can either use Trail for this: https://github.com/drcmda/react-spring/blob/master/API-OVERVIEW.md#trailsstaggered-transitions

Or, delay springs: https://github.com/drcmda/react-spring/issues/97#issuecomment-392380139

Upvotes: 1

Related Questions