You probably seen it around. It's a trend , then it's not. But its definitely interesting and cool animation to have on your website. And it's not that hard to do. You don't have to write everything by yourself, there are a plenty of plugins to help you do animations.
I think this is the easiest way to achieve this animation.
For this example we are going to use ScrollTrigger - Plugin for GSAP.
Note: in this example I'm using TailwindCss. If you are not familiar with it, you can use your preferred way of styling. For me it's much easier to have style and everything in one place.
In your react app install:
npm install gsap
import React from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
<div className="page_wrapper min-h-[170vh] relative bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500">
<div className="p-4 bg-blue-300 absolute top-0 left-0 w-full">Header</div>
{/* This is the element we want to animate on scroll */}
<h1 className="scrolling_text text-white text-8xl absolute font-black top-[30%]">
SOME COOL TEXT!
</h1>
<div className="p-4 bg-gray-300 absolute bottom-0 left-0 w-full">
Footer
</div>
</div>
Now we need to select trigger node, set timeline and setup animation - how we want our element to move.
useEffect(() => {
gsap.set(".page_wrapper", { width: "100%" });
gsap.timeline({
scrollTrigger: {
trigger: ".page_wrapper",
start: "top top",
end: "bottom bottom",
scrub: 0,
},
}).fromTo(
".scrolling_text",
{ y: "30%", x: "120%" },
{ y: "130%", x: "10%" },
0
);
}, []);
And thats it . Your component should look like this:
import React, { useEffect } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
const ScrollTriggerText = () => {
useEffect(() => {
gsap.set(".page_wrapper", { width: "100%" });
gsap.timeline({
scrollTrigger: {
trigger: ".page_wrapper",
start: "top top",
end: "bottom bottom",
scrub: 0,
},
}).fromTo(
".scrolling_text",
{ y: "30%", x: "120%" },
{ y: "130%", x: "10%" },
0
);
}, []);
return (
<div className="page_wrapper min-h-[170vh] relative bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500">
<div className="p-4 bg-blue-300 absolute top-0 left-0 w-full">
Header
</div>
<h1 className="scrolling_text text-white text-8xl absolute font-black top-[30%]">
SOME COOL TEXT!
</h1>
<div className="p-4 bg-gray-300 absolute bottom-0 left-0 w-full">
Footer
</div>
</div>
);
};
export default ScrollTriggerText;
You can now customise and tailor for your needs. Everything you needed to understand is in useEffect
hook.