Белые полосы на холсте при использовании scrolltrigger ⇐ Javascript

[Anonymous]

Я пытаюсь избавиться от белых пространств внизу и на правой стороне экрана. Я приложил картинку для справки. Также добавлен весь код ниже. Как решить эту проблему? Я попытался реализовать решение здесь https://gsap.com/community/forums/topic ... e/.образно Но проблема сохраняется. Br />import React, { useRef, useMemo, useEffect } from "react";
import { Canvas } from "@react-three/fiber";
import { Background } from "./Background";
import { Cloud } from "./Cloud";
import { Stars } from "./stars";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// Register ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);

function Destination() {
const tl = useRef();
const backgroundColors = useRef({
colorA: "#001540",
colorB: "#001C57",
});

const sceneOpacity = useRef(1);

// Generate random cloud positions and scales
const clouds = useMemo(() => {
const numClouds = 40;
const cloudArray = [];

for (let i = 0; i < numClouds; i++) {
cloudArray.push({
position: [
Math.random() * 60 - 20,
Math.random() * 60 - 20,
Math.random() * -60,
],
scale: Math.random() * 1.6 + 0.3,
});
}

return cloudArray;
}, []);

// Set up scroll-triggered animations
useEffect(() => {
// Select the text containers
const destinationText = document.querySelector(".destination-text");
const moreContent = document.querySelector(".more-content");

// GSAP animation for "Destination Info"
gsap.fromTo(
destinationText,
{
x: -100, // Start 100px to the left
opacity: 0, // Start invisible
},
{
x: 0, // Move to the center (x: 0)
opacity: 1, // Fade in
duration: 1, // Animation duration
scrollTrigger: {
trigger: destinationText, // Element to trigger the animation
start: "top 80%", // Start animation when the top of the element is 80% from the top of the viewport
end: "top 20%", // End animation when the top of the element is 20% from the top of the viewport
scrub: true, // Smoothly animate based on scroll position
toggleActions: "play none none reverse", // Play animation on scroll in, reverse on scroll out
},
}
);

// GSAP animation for "More Content"
gsap.fromTo(
moreContent,
{
x: 100, // Start 100px to the right
opacity: 0, // Start invisible
},
{
x: 0, // Move to the center (x: 0)
opacity: 1, // Fade in
duration: 1, // Animation duration
scrollTrigger: {
trigger: moreContent, // Element to trigger the animation
start: "top 80%", // Start animation when the top of the element is 80% from the top of the viewport
end: "top 20%", // End animation when the top of the element is 20% from the top of the viewport
scrub: true, // Smoothly animate based on scroll position
toggleActions: "play none none reverse", // Play animation on scroll in, reverse on scroll out
},
}
);
}, []);

return (

{/* Full-screen Canvas for 3D background */}

{/* Background component */}


{/* Stars */}


{/* Randomly placed clouds */}
{clouds.map((cloud, index) => (

))}


{/* Scrollable content */}

{/* Text content */}

Destination Info
Welcome

{/* More content */}
className="more-content"
style={{
color: "#FFFFFF",
textAlign: "center",
padding: "20px",
}}
>
More Content
Scroll down to see more!



);
}

export default Destination;


Подробнее здесь: https://stackoverflow.com/questions/794 ... olltrigger