[Can someone please help me out with this...? Its showing ScrollTrigger is missing even if its present there. Invalid property scrollTrigger set to {} Missing plugin? gsap.registerPlugin()]

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

 

[Can someone please help me out with this...? Its showing ScrollTrigger is missing even if its present there. Invalid property scrollTrigger set to {} Missing plugin? gsap.registerPlugin()]

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()

 

 

 

If you want folder structure do let me know... I really want help.

 

This is where ScrollTrigger is located :

 

 

[Can someone please help me out with this...? Its showing ScrollTrigger is missing even if its present there. Invalid property scrollTrigger set to {} Missing plugin? gsap.registerPlugin()]

 

Here is the link for codepen but its not working as I dont have any idea about how to implement THREEJs in codepen: 

 

See the Pen jORMdKO?editors=0111 by Suyash-the-vuer (@Suyash-the-vuer) on CodePen

 

 

 

 

[Can someone please help me out with this...? Its showing ScrollTrigger is missing even if its present there. Invalid property scrollTrigger set to {} Missing plugin? gsap.registerPlugin()]

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

 

[Can someone please help me out with this...? Its showing ScrollTrigger is missing even if its present there. Invalid property scrollTrigger set to {} Missing plugin? gsap.registerPlugin()]

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

 

[Can someone please help me out with this...? Its showing ScrollTrigger is missing even if its present there. Invalid property scrollTrigger set to {} Missing plugin? gsap.registerPlugin()]

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();