Jump to content
Search Community

Stagger Array with fetched items

battleaxe10000 test
Moderator Tag

Recommended Posts

Hi all,

I'm sorry I can't duplicate this one on codepen, but I believe it's pretty straight forward.

 

I am getting some data via an API-call and that data is displayed as a list of cards. So far so good.

 

I would like to animate these card with a stagger when the user enters the page from the home page (like opacity 0 to opacity 1).

I have been able to animte the whole card-container (<ListSection/>), but not each card on its own.

 

 I create each card in its own component (using react):

<Card>
    <CardHeader>{name}</CardHeader>
    <PSmall>population</PSmall>
    <CardListHeader >{numeral(population).format("0,0")}</CardListHeader>
    <DetailButton to={`/data/${id + 1}`}>details</DetailButton>
</Card>

And then I use the Card in the List-component:

<ListSection>
    {data.map((item, index) => {
      return (
       <Card key={index} {...item} />
     )
     })}
</ListSection>

 

Some help please?

 

Thank you :)

Link to comment
Share on other sites

  • battleaxe10000 changed the title to Stagger Array with fetched items

Hi, and thank you!

 

Just an example of what I've tried.

useEffect(() => {
        let targets = gsap.utils.toArray(".dataItem");
        gsap.fromTo(targets, 2, {
            scale: 0.1,
            y: 40,
            ease: "power2.inOut"
        }, {
            scale: 1,
            y: 0,
            stagger: {
                from: "center",
                amount: 1.5
            },
        });
    }, [])
<ListSection className="dataItem" >
      {planets.map((item, index) => {
          return (
      <Card key={index} {...item} />
                 )
      })}
</ListSection>

I got the stagger from the page you linked, and just modified it a bit.

 

Still, I can only reach the <ListSection> not each individual <Card>

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