Suyash Surve

I checked it but uploading asset is only for pro members of GSAP...

Sorry for the video quality but this is what I have achieved till now. GSAP is working when I am using it to change camera position but when I am introducing ScrollTrigger in it, its giving me this error: Invalid property scrollTrigger set to {} Missing plugin? gsap.registerPlugin() screen-capture (31) (1).webm If you want folder structure do let me know... I really want help. This is where ScrollTrigger is located :

Here is the link for codepen but its not working as I dont have any idea about how to implement THREEJs in codepen: https://codepen.io/Suyash-the-vuer/pen/jORMdKO?editors=0111

I tried to import it from "dist" too but its still showing me error.

I changed that but its still showing same error...!

I am creating ThreeJs scene and using ScrollTrigger to update the camera position but its giving me error: Invalid property scrollTrigger set to {} Missing plugin? gsap.registerPlugin() Here is my code: import "./style.css"; import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import * as dat from "lil-gui"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js"; gsap.registerPlugin(ScrollTrigger); THREE.ColorManagement.enabled = false; // Canvas const canvas = document.querySelector("canvas.webgl"); // Scene const scene = new THREE.Scene(); scene.background = new THREE.Color("#000"); // Loading Manager const loadingManager = new THREE.LoadingManager(); const progressBar = document.getElementById("progressBar"); const progressBarContainer = document.querySelector(".progressBarContainer"); loadingManager.onProgress = (url, loaded, total) => { progressBar.value = (loaded / total) * 100; }; loadingManager.onLoad = () => { progressBarContainer.style.display = "none"; }; // Draco Loader const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath("/draco/"); // GLTF Loader const gltfLoader = new GLTFLoader(loadingManager); gltfLoader.setDRACOLoader(dracoLoader); let mixer = null; gltfLoader.load("/model/forest/scene.gltf", (gltf) => { let model = gltf.scene; model.scale.set(0.1, 0.1, 0.1); scene.add(model); }); //Lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.9); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); directionalLight.shadow.mapSize.set(1024, 1024); directionalLight.position.set(5, 5, 5); scene.add(directionalLight); /* Sizes */ const sizes = { width: window.innerWidth, height: window.innerHeight, }; window.addEventListener("resize", () => { // Update sizes sizes.width = window.innerWidth; sizes.height = window.innerHeight; // Update camera camera.aspect = sizes.width / sizes.height; camera.updateProjectionMatrix(); // Update renderer renderer.setSize(sizes.width, sizes.height); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); }); // Base camera const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100); camera.position.set(0, 2, 5); camera.lookAt(0, 0, 0); scene.add(camera); // Controls const controls = new OrbitControls(camera, canvas); controls.enableDamping = true; controls.enableZoom = false; /* Renderer */ const renderer = new THREE.WebGLRenderer({ canvas: canvas, }); renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.setSize(sizes.width, sizes.height); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); /*=============================GSAP==============================*/ const tl = gsap.timeline(); tl.to(camera.position, { x: -5, z: -5, ease: "power1.inOut", ScrollTrigger: { trigger: ".section-two", scrub: 1, markers: true, start: "top bottom", end: "top top", }, }); /*Animate*/ const clock = new THREE.Clock(); let previousTime = 0; const tick = () => { const elapsedTime = clock.getElapsedTime(); const deltaTime = elapsedTime - previousTime; previousTime = elapsedTime; // Update controls controls.update(); // Render renderer.render(scene, camera); // Call tick again on the next frame window.requestAnimationFrame(tick); }; tick();