Hello everyone,
I'm currently working on a React application and have been trying to create an animation where a specific section within one of my components gets pinned, and upon completion of its animation, it should scroll down to the next component. However, I've run into an issue when applying ScrollTrigger and creating a timeline for an element within my component.
The problem I'm experiencing is that the start and end markers of the viewport coincide, and the markers for my targeted element are nowhere to be seen. Additionally, the position of the screen marker has shifted, and a strange line appears, covering the entire width of my screen.
I'm including the relevant code snippet from my component for reference:
import React, { Fragment, useRef, useLayoutEffect } from "react";
import "./style/main.css";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
function Main() {
const app = useRef();
useLayoutEffect(() => {
let ctx = gsap.context(() => {
var tl1 = gsap.timeline({
scrollTrigger: {
trigger: ".box2",
start: "0% 50%",
end: "50% 50%",
scrub: "true",
markers: "true",
},
});
}, app);
return () => ctx.revert();
}, []);
return (
<>
<div ref={app} className="App">
<div className="box1">
<div className="box">selector</div>
</div>
<div className="box2">
<div className="boxx">selector</div>
</div>
</div>
</>
);
}
export default Main;
Css for this component is
body {
background-color: var(--dark);
color: var(--light);
font-family: "Signika Negative", sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
.box {
position: absolute;
width: 100px;
height: 100px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--green);
font-weight: 600;
color: var(--light);
transition: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.App {
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
min-height: 100vh;
}
.box1{
background-color: #ffffff;
height: 100vh;
width: 100%;
}
.box2{
background-color: #5900ff;
height: 100vh;
width: 100%;
}