Jump to content
GreenSock

penuck

Members
  • Posts

    2
  • Joined

  • Last visited

penuck's Achievements

  1. 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> ); }; ...
  2. 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> ); };
×