GSAP Layout Animation With reactJs
Smooth animation using GSAP,ScrollTrigger and reactjs
Create reactjs project and install gsap using npm install gsap command.
HTML
in HTML code we create on ref for access elements.
CSS
Create reactjs project and install gsap using npm install gsap command.
HTML
in HTML code we create on ref for access elements.
import gsap from "gsap";
import { TweenLite, TweenMax, Power3, Power4, Power1 } from "gsap";
<div>
<div className="load-container">
<div className="load-screen bottom"
ref={(el) => (screen = el)}></div>
</div>
<div ref={(el) => (body2 = el)} className="Headd">
<main style={{ zIndex: 11, position: "relative" }}>
<div className="box-container" style={{ zIndex: 11 }}>
<div className="tile box-1"></div>
<div className="tile box-2"></div>
<div className="tile box-3"></div>
</div>
</main>
<div className="container"
style={{ zIndex: 11, position: "relative" }}>
<div className="page box-1">
</div>
<div className="page box-2">
</div>
<div className="page box-3">
</div>
</div>
</div>
</div>
CSS
.box-container {
position: absolute;
top: 275px;
right: 0;
z-index: 11;
left: 0;
text-align: center;
user-select: none;
}
.tile {
width: 200px;
height: 200px;
margin: 4px;
cursor: pointer;
z-index: 11;
display: inline-block;
}
.container {
visibility: hidden;
}
.page {
cursor: pointer;
position: absolute;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
position: fixed;
}
.imgClass{
width: 0%;
opacity: 0;
height:100%;
left:0;
}
.box-1 {
background: #F4DB33;
}
.box-2 {
background: #972FF8;
}
.box-3 {
background: #7DD6FE;
}
GSAP Animation
On first load call addListeners() Method for each box click.
On first load call addListeners() Method for each box click.
.png "GSAP Layout animation in reactjs")
Inside addListeners() Method addEventListener() to tile and page click.
.png "GSAP website animation")
After onClick() of tile and page call animateBox() function to set style and position of page and boxes.
.png "GSAP layout animation for website")
Use GSAP Method to create loader animation. Different Method of GSAP you can check below link
https://www.codeforinfo.com/2023/06/useful-gsap-method-to-create-gsap.html
let screen = useRef(null);
let body2 = useRef(null);
useEffect(() => {
var tl = gsap.timeline();
var root = document.documentElement;
var body = document.body;
var pages = document.querySelectorAll(".page");
var tiles = document.querySelectorAll(".tile");
tl.to(screen, {
duration: 1.2,
height: "100%",
ease: Power3.easeInOut,
});
tl.to(screen, {
duration: 1,
bottom: "100%",
ease: Power3.easeInOut,
delay: 0.3,
});
function animateBox(fromBox, toBox) {
var clone = fromBox.cloneNode(true);
var from = posOfBox(fromBox);
var to = posOfBox(toBox);
TweenLite.set([fromBox, toBox], { visibility: "hidden" });
TweenLite.set(clone, { position: "absolute", margin: 0 });
body.appendChild(clone);
var style = {
x: to.left - from.left,
y: to.top - from.top,
width: to.width,
height: to.height,
autoRound: false,
ease: Power1.easeOut,
onComplete: onComplete
};
TweenLite.set(clone, from);
TweenLite.to(clone, 0.3, style)
function onComplete() {
TweenLite.set(toBox, { visibility: "visible" });
body.removeChild(clone);
}
}
TweenMax.to(body2, .3, {
css: {
opacity: "1",
pointerEvents: "auto",
ease: Power4.easeInOut
}
}).delay(2);
return () => {
TweenMax.to(body2, 1, {
css: {
opacity: "0",
pointerEvents: "auto",
}
});
}
}, []);