Gsap mask animation | Awwaard worthy website component

GSAP mask animation in Reactjs | Awwaard worthy website component recreate.

Gsap mask animation : 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:

Register the scrollTrigger plugin to trigger elements on scroll.
Create React Hooks and write GSAP code inside them.
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.
Develop timelines and scrollTriggers based on your specific requirements.

GSAP Animation Logic

				
					useEffect(() => {
    const ctx = gsap.context(() => {
			const tl = gsap.timeline({
				scrollTrigger: {
					trigger: ".svg-main",
					scrub: true,
					pin: true,
					start: "50% 50%",
					end: "300% 50%",
					markers: true,
				}
			})
			tl.to(".svg-outer", {
				maskSize: "200%",
			}, 'outer')
			tl.to(".img", {
				backgroundSize: "100%%",
			}, 'outer')

			tl.to(".svg-inner", {
				maskSize: "200%",
			}, 'inner')
			tl.to(".img2", {
				backgroundSize: "100%%",
			}, 'inner')
		})
		return () => ctx.revert();
},[]);

				
					<div className="svg-main">
				<div className="svg-outer">
					<div className="img">
						<div className="svg-inner">
							<div className="img2">

							</div>
						</div>
					</div>
				</div>
			</div>

App.css file

				
					* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: neu;
}
.svg-main{
	height: 100vh;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.svg-outer, .svg-inner{
	height: 100%;
	mask-size: 0%;
	width: 100%;
	transition: all ease 0.3s;
	mask-position: center;
	mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMjMuOTk4NSAwQzEzLjY0ODcgNS43NTU5MyAxMC4zNDgzIDUuNzU1OTMgMS45MDczNWUtMDYgLTEuMDQ5MDdlLTA2QzYuMjc3MyA5LjQ4NjUyIDYuMjc3MyAxMi41MTM1IDkuNDU2OThlLTA3IDIyQzEwLjM0OTggMTYuMjQ1NSAxMy42NTAyIDE2LjI0NTUgMjQgMjJDMTcuNzIxMiAxMi41MTM1IDE3LjcyMTIgOS40ODc5IDIzLjk5ODUgMFoiIGZpbGw9ImJsYWNrIiAvPgo8L3N2Zz4=");
	mask-repeat: no-repeat;
}
.svg-outer .img{
	width: 100%;
	height: 100%;
	background-size: 130%;
	background-position: center;
	transition: all ease 0.3s;
	background-image: url("https://axelvanhessche.com/images/peugeot_385.webp");
}
.svg-inner .img2{
	width: 100%;
	height: 100%;
	background-size: 130%;
	background-position: center;
	transition: all ease 0.3s;
	background-image: url("https://axelvanhessche.com/images/summer-cover-selected.webp");
}

Whole component File

				
					import { useEffect } from "react";
import "./App.css";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

function App() {

	useEffect(() => {
		const ctx = gsap.context(() => {
			const tl = gsap.timeline({
				scrollTrigger: {
					trigger: ".svg-main",
					scrub: true,
					pin: true,
					start: "50% 50%",
					end: "300% 50%",
					markers: true,
				}
			})
			tl.to(".svg-outer", {
				maskSize: "200%",
			}, 'outer')
			tl.to(".img", {
				backgroundSize: "100%%",
			}, 'outer')

			tl.to(".svg-inner", {
				maskSize: "200%",
			}, 'inner')
			tl.to(".img2", {
				backgroundSize: "100%%",
			}, 'inner')
		})
		return () => ctx.revert();
	
	}, []);
	
	return (
		<div className="svg-main">
			<div className="svg-outer">
				<div className="img">
					<div className="svg-inner">
						<div className="img2">

						</div>
					</div>
				</div>
			</div>
		</div>
	)
}