I'm new to GreenSock and I encountered a rather confusing error when using scroll triggers with reactjs.
Same JSX code but I get two different results on Codeandbox and on vscode, I'm not sure if this is a bug on my dev environment so here is the video I recorded the error:
https://streamable.com/m0kvca
here is my code on Codeandbox, everything is very similar and there is no difference but the result is different: :Codeandbox link
here is my code in app.js file
import React, { useEffect, useState, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
function App() {
const menuRef = useRef(null);
const leftRef = useRef(null);
useEffect(() => {
(async () => {
const LocomotiveScroll = (await import("locomotive-scroll")).default;
const locomotiveScroll = new LocomotiveScroll();
})();
}, []);
useEffect(() => {
const menuElement = menuRef.current;
const leftElement = leftRef.current;
if (menuElement && leftElement) {
ScrollTrigger.create({
trigger: menuElement,
start: "top top",
end: "bottom bottom",
pin: leftElement,
markers: true,
});
ScrollTrigger.refresh();
}
}, []);
return (
<div>
<div style={{ height: "50vh" }}></div>
<div>
<div
ref={menuRef}
style={{
display: "flex",
border: "2px",
borderStyle: "solid",
gap: "20px",
}}
>
<div
ref={leftRef}
style={{ width: "30%", height: "50vh", backgroundColor: "#ff0" }}
>
<div style={{ padding: "20px" }}>1</div>
<div style={{ padding: "20px" }}>2</div>
<div style={{ padding: "20px" }}>3</div>
<div style={{ padding: "20px" }}>4</div>
<div style={{ padding: "20px" }}>5</div>
</div>
<div style={{ width: "70%" }}>
<div style={{ height: "50vh", background: "#ddd" }}></div>
<div style={{ height: "50vh", background: "#ff0" }}></div>
<div style={{ height: "50vh", background: "#0ff" }}></div>
<div style={{ height: "50vh", background: "#0f0" }}></div>
<div style={{ height: "50vh", background: "#333" }}></div>
</div>
</div>
</div>
<div style={{ height: "50vh", background: "#333" }}>1</div>
<div style={{ height: "50vh", background: "#555" }}>2</div>
<div style={{ height: "50vh", background: "#777" }}>3</div>
<div style={{ height: "50vh", background: "#999" }}>4</div>
</div>
);
}
export default App;
làm ơn giúp tôi