Hello, I'm new to GSAP. I was trying scrolltrigger in a NextJS project but I noticed that
gsap.utils.selector(someRef)
...
useEffect(() => {
gsap.to(someRef('.s1'), {
duration: 1,
x: 800,
scrollTrigger: someRef('.s2'),
});
});
...
not working as it should (I guess). Here is the code I was working on. If I use the gsap.utils.selector() then the animation of .s1 is triggering whenever the .s1 is coming inside the viewport but if I use this then the animation of .s1 is triggering when .s2 comes into the viewport as it should. Please help.
gsap.utils.selector(someRef)
...
useEffect(() => {
gsap.to('.s1', {
duration: 1,
x: 800,
scrollTrigger: '.s2',
});
});
...
Here is the original code that I was working on
import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import React, { useEffect, useRef } from 'react';
gsap.registerPlugin(ScrollTrigger);
export default function Home() {
const containerRef = useRef();
const container = gsap.utils.selector(containerRef);
const test = useRef();
useEffect(() => {
gsap.to(container('.s1'), {
duration: 1,
x: 800,
scrollTrigger: container('.s2'),
});
});
return (
<>
<div ref={containerRef} className='container-wrapper'>
<div className='hero section'></div>
<div className='about section'>
<div className='s1'></div>
<div className='s2'></div>
</div>
<div className='skills section'></div>
</div>
<style jsx>{`
.section {
height: 100vh;
width: 100%;
}
.hero {
background-color: red;
}
.about {
background-color: green;
}
.skills {
background-color: blue;
}
.s1 {
width: 200px;
height: 200px;
background-color: white;
}
.s2 {
margin-top: 400px;
width: 200px;
height: 200px;
background-color: black;
}
`}</style>
</>
);
}