Card stack animation in GSAP, Reactjs

Card stack GSAP animation in Reactjs : GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

Please Like and subscribe for more GSAP animation – Youtube video

Lets, Create a ReactJS project and install gsap :
  • You can create a new ReactJS project using Create React App or any other preferred method. If you haven’t installed Create React App globally, you can do so with the following command: npm install -g create-react-app
  • Then create a new React project:  npx create-react-app my-gsap-project
  • go to project folder :  cd my-gsap-project
  • Next, you need to install GSAP package. You can do this via npm or yarn: npm install gsap or yarn add gsap

 

Here are some basic steps to follow when creating GSAP animation in Reactjs:

  1. Register the scrollTrigger plugin to trigger elements on scroll.

  2. Create React Hooks and write GSAP code inside them.

  3. Utilize gsap.context() to collect all GSAP animations and ScrollTriggers created within the supplied function, allowing for easy reverting or killing of ALL of them at once.

  4. Develop timelines and scrollTriggers based on your specific requirements.

				
					useEffect(() => {

		let ctx = gsap.context(() => {

			const tl = gsap.timeline({
				scrollTrigger: {
					trigger: '.accordionsWrapper',
					pin: true,
					start: 'top top',
					end: 'bottom top',
					scrub: 1,
					ease: 'linear',
					markers: true,
				}
			})

			tl.to('.accordion', {
				height: 150,
				paddingBottom: 0,
				stagger: .5,
			})
		});
		return () => ctx.revert();

	}, [])
Full Source code
				
					import { Box, Grid, Typography } from "@mui/material";
import React, { useEffect } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const data = [
	{ title: 'Pretty everywhere.', descTitle: 'NICOLAS BOCCACCIO', founder: 'Peter Parker', desc: 'Lets you immerse yourself in whatever you’re reading, watching, or creating. The 10.9-inch Liquid Retina display features advanced technologies like True Tone, P3 wide color, and an antireflective coating.1', img: 'http://www.todaysparent.com/wp-content/uploads/2014/02/Mint1.jpg' },
	{ title: 'Take Center Stage.', descTitle: 'UTILISER LES TENDANCES ', founder: 'John peter', desc: 'Lets you immerse yourself in whatever you’re reading, watching, or creating. The 10.9-inch Liquid Retina display features advanced technologies like True Tone, P3 wide color, and an antireflective coating.1', img: 'https://i.pinimg.com/736x/1a/e9/ff/1ae9ff68eddb75113cc797f1324515b9--color-coordination-reiss.jpg' },
	{ title: 'All-screen design.', descTitle: 'TOUT FAIRE POUR QUE LA ', founder: 'Mark luis', desc: 'Lets you immerse yourself in whatever you’re reading, watching, or creating. The 10.9-inch Liquid Retina display features advanced technologies like True Tone, P3 wide color, and an antireflective coating.1', img: 'https://ct112013.files.wordpress.com/2013/07/pasteeel.jpg' },
	{ title: 'Beauty all around.', descTitle: 'LANCEZ VOTRE CAMPAGNE CE ', founder: 'Warner ', desc: 'Lets you immerse yourself in whatever you’re reading, watching, or creating. The 10.9-inch Liquid Retina display features advanced technologies like True Tone, P3 wide color, and an antireflective coating.1', img: 'http://www.todaysparent.com/wp-content/uploads/2014/02/Mint1.jpg' },
]
const StackCard = () => {
	useEffect(() => {

		let ctx = gsap.context(() => {

			const tl = gsap.timeline({
				scrollTrigger: {
					trigger: '.accordionsWrapper',
					pin: true,
					start: 'top top',
					end: 'bottom top',
					scrub: 1,
					ease: 'linear',
					markers: true,
				}
			})

			tl.to('.accordion', {
				height: 150,
				paddingBottom: 0,
				stagger: .5,
			})
		});
		return () => ctx.revert();

	})
	return (
		<Box sx={{ background: "#7B7762" }}>
			<Box id="wrapper">
				<Box id="content"
					sx={{
						"&  .accordianTitle": {
							fontSize: "max(2vw, 20px)",
							lineHeight: 1.1,
							paddingBottom: ".4em",
							color: "#1d1d1d",
							fontWeight: 700,
							textTransform: "uppercase",
						},
						"& .textDesc": {
							lineHeight: 1.4,
							overflow: "hidden",
							paddingBottom: "20px",
							color: "#1d1d1d",
							textTransform: "uppercase",
						},
						"& .accordionsWrapper": {
							display: "flex",
							flexDirection: "column",
							alignItems: "center",
							"& .accordion": {
								width: "100%",
								overflow: "hidden",
								background: "#7B7762",
								padding: " 50px 30px 80px",
								// marginBottom: "40px",
								borderBottom: "1px solid #000",
							}
						},
					}}>
					<Box className="accordionsWrapper">
						<Grid container spacing={3} >
							{data.map((data, i) => (
								<Grid item xs={12} className="accordion">
									<Grid container spacing={3}>
										<Grid item xs={3}>
											<Box className="accordianTitle">
												{data.title}
											</Box>
										</Grid>
										<Grid item xs={3}>
											<Box className="textDesc" sx={{ fontSize: "30px", fontWeight: 500 }}>
												{data.descTitle}
											</Box>
										</Grid>
										<Grid item xs={3}>
											<>
												{data.founder}
												<Typography component="p" sx={{ textTransform: "uppercase", mt: 10, color: "#1d1d1d" }}>{data.desc}</Typography>
											</>
										</Grid>
										<Grid item xs={3}>
											<Box sx={{ height: "400px", width: "350px", "&>img": { height: "100%", width: "100%", display: "block" } }}>
												<img src={data.img} alt="no-found" />
											</Box>
										</Grid>
									</Grid>
								</Grid>
							))}
						</Grid>
					</Box>
				</Box>
			</Box>
		</Box>
	)
}

export default StackCard;

Related Posts

Scroll to Top