Simple GSAP text animation on scroll (2 ways)
This method uses GSAP to add a class to an element and the animation is in css.
GSAP:
gsap.registerPlugin(ScrollTrigger);
function initTextAnimate() {
gsap.utils.toArray(".anim-text-animate").forEach(function(section) {
ScrollTrigger.create({
trigger: section,
start: "top bottom-=100px",
toggleClass: {targets: section, className: "animated-copy-element"}
});
});
}
window.addEventListener('load', function(){
initTextAnimate();
});SCSS:
.anim-text-animate {
transition: opacity .6s linear,transform .6s cubic-bezier(0.26,0.67,0.48,0.91);
opacity: 0;
transform: translateY(120px);
}
.anim-text-animate.animated-copy-element {
opacity: 1;
transform: translateY(0);
}This Second method uses GSAP only perhaps this route has a better fallback if the browser doesn’t allow javascript but performance maybe worse.
GSAP:
gsap.registerPlugin(ScrollTrigger);
function initTextAnimateGSAP() {
gsap.utils.toArray(".anim-text-animate-gsap").forEach(function(section) {
gsap.from(section, {
y: "120px",
opacity: 0,
ease: "none",
scrollTrigger: {
trigger: section,
pin: false,
scrub: 1.5,
start: "top bottom",
end: "top bottom-=200px",
}
});
});
}
window.addEventListener('load', function(){
initTextAnimateGSAP();
});With a duration not on scrub and reverse when leaving the screen
function initTextAnimateGSAP() {
gsap.utils.toArray(".anim-text-animate-gsap").forEach(function(section) {
gsap.from(section, {
y: "120px",
opacity: 0,
ease: "power1.out",
duration: 0.5,
scrollTrigger: {
trigger: section,
pin: false,
start: "top bottom-=100px",
toggleActions: "play none none reverse",
}
});
});
}