penuck Posted August 24, 2021 Share Posted August 24, 2021 Hello! I'm doing app which returns cards from JSON array and it also have pagination. I found source code for fade in animation from web which works like a charm. I'm wondering how to make animation also Fade out. I have pagination which has 10 cards per page and when I click next page cards should fade out and after that next cards should fade in. Any ideas? I don't think I need to attach anything else than fade animation component? Here's the code I found: const FadeAnimation = ({ children, wrapperElement = "div", direction = null, delay = 0, ...props }) => { const Component = wrapperElement; let compRef = useRef(null); const distance = 5; let fadeDirection; switch (direction) { case "left": fadeDirection = { x: -distance }; break; case "right": fadeDirection = { x: distance }; break; case "up": fadeDirection = { y: distance }; break; case "down": fadeDirection = { y: -distance }; break; default: fadeDirection = { x: 0 }; } useEffect(() => { gsap.from(compRef.current, 1, { ...fadeDirection, opacity: 0, delay, }); }, [compRef, fadeDirection, delay]); return ( <Component ref={compRef} {...props}> {children} </Component> ); }; Link to comment Share on other sites More sharing options...
Cassie Posted August 24, 2021 Share Posted August 24, 2021 This article should help you out! Specifically the bit on exit animations. Link to comment Share on other sites More sharing options...
penuck Posted August 24, 2021 Author Share Posted August 24, 2021 I read that but still can't figure out solution. I tried to implement exit animation example to my component but it ended up to hide all cards without any animations. Here's what I tried: ... useEffect(() => { gsap.from(compRef.current, { ...fadeDirection, opacity: 0, delay, }); gsap.to(compRef.current, { opacity: 0, onComplete: () => setActive(false), }); }, [compRef, fadeDirection, delay]); return ( <Component ref={compRef} {...props}> {children} </Component> ); }; ... Link to comment Share on other sites More sharing options...
nico fonseca Posted August 24, 2021 Share Posted August 24, 2021 If you do this: gsap.from(compRef.current, { ...fadeDirection, opacity: 0, delay, }); gsap.to(compRef.current, { opacity: 0, onComplete: () => setActive(false), }); and your delay is 0, probably it won't work as you expect, because you have two tweens running at the same time. Which is the output of the compRef.current ? Btw if you provide a minimal demo we'll understand better! 2 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