Search the Community
Showing results for tags 'fetch'.
Found 3 results
-
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
-
Hello Folks, Been having a hell of a frustrating time trying to combine GSAP with React. I'm fairly new to both technologies. I'm basically doing a fetch request to get data from a json file (public/data.json) and mapping it into a div in the Test.js component. I just cant seem to animate anything thats returned in the response with GSAP. From everything I was able to find online, it seems I need to use useRef() with GSAP. Any help would be greatly appreciated. I've created a code sandbox here: https://codesandbox.io/s/musicapp-with-react-and-gsap-odjxq?file=/src/Test.js
-
How to stagger elements after fetching data from api?
