I used GASP and ScrollTigger in the Next.js (React) project, and used very basic code.
import { useState, useEffect, useRef } from 'react';
import gsap from 'gsap';
import { CSSRulePlugin } from 'gsap/dist/CSSRulePlugin';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
export default function SomePage() {
const secRef = useRef(null);
const titleRef = useRef(null);
const imgBoxRef = useRef(null);
const boxRef = useRef(null);
useEffect(() => {
if (typeof window !== "undefined") {
gsap.registerPlugin(CSSRulePlugin, ScrollTrigger);
}
let tl = gsap.timeline({
scrollTrigger: {
trigger: secRef.current,
start: "top top",
scrub: true,
markers: true,
pin: true
}
});
tl
.fromTo(imgBoxRef.current, { opacity: 0, scale: 0.8 } ,{ opacity: 1, scale: 1, duration: 2 })
.fromTo(boxRef.current, { opacity: 0 }, { opacity: 1, duration: 0.5 }, '-=1')
.fromTo(boxRef.current, { y: '150%', scale: 3 }, { y: '-50%', scale: 0.5, duration: 2 }, '-=1')
.fromTo(titleRef.current, { opacity: 0 }, { opacity: 1, duration: 1 }, '-=1')
.fromTo(imgBoxRef.current, { scale: 1 }, { scale: 1.5, duration: 1 }, '-=2')
.fromTo(secRef.current, { y: 0 }, { x: '-80%', duration: 3 }, '+=1');
return () => tl.scrollTrigger.kill();
}, []);
}
But got warning
Invalid property opacity set to 0 Missing plugin? gsap.registerPlugin()
Invalid property y set to 150% Missing plugin? gsap.registerPlugin()
Invalid property scale set to 3 Missing plugin? gsap.registerPlugin()
How to fixed this warning? Do I get something wrong?