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>
);
};
