battleaxe10000 Posted November 16, 2021 Share Posted November 16, 2021 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 More sharing options...
Cassie Posted November 16, 2021 Share Posted November 16, 2021 Hey @battleaxe10000 - there's no GSAP code here! This is how to do a stagger though - https://greensock.com/docs/v3/Staggers Link to comment Share on other sites More sharing options...
Cassie Posted November 16, 2021 Share Posted November 16, 2021 Maybe you're using this third party tool?https://bitworking.github.io/react-gsap/src-components-tween Link to comment Share on other sites More sharing options...
battleaxe10000 Posted November 16, 2021 Author Share Posted November 16, 2021 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 More sharing options...
battleaxe10000 Posted November 16, 2021 Author Share Posted November 16, 2021 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 More sharing options...
OSUblake Posted November 16, 2021 Share Posted November 16, 2021 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. 1 Link to comment Share on other sites More sharing options...
battleaxe10000 Posted November 16, 2021 Author Share Posted November 16, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now