Jump to content
GreenSock

battleaxe10000

Stagger Array with fetched items

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

I also tried

<Card key={index} {...item} ref={cardRef} />

and

useEffect(() => {
        let targets = gsap.utils.toArray(cardRef.current);
        gsap.fromTo(targets, 2, {
            scale: 0.1,
            y: 40,
            ease: "power2.inOut"
        }, {
            scale: 1,
            y: 0,
            stagger: {
                from: "center",
                amount: 1.5
            },
        });
    }, [])

But no luck

Link to comment
Share on other sites

If you're fetching data, then you'll need to wait for it to load.

 

 

If you need more help, please make a minimal demo, like on CodeSandbox. We don't need to see your entire project. Just a basic demo of the problem that shows the issue.

 

  • Like 1
Link to comment
Share on other sites

Than you very much.

I will look into that. If I can't make it work I will try with CodeSandbox.

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