Jump to content
GreenSock

penuck

Fade-In and Fade-Out cards on load

Recommended Posts

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

This article should help you out! Specifically the bit on exit animations.

 

 

Link to comment
Share on other sites

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

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!

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×