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

[Suyash Surve]

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

 

[akrdesign]

@Suyash Surve Hey brother!! Basically here you have to write scrollTrigger (s is small) and not ScrollTrigger.

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",

  },

});

[Suyash Surve]

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

 

[akrdesign]

Replace this line please  with this

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger

[akrdesign]

Or I guess you don't need these two lines of code.

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger)

[akrdesign]

3 minutes ago, akrdesign said:

Or I guess you don't need these two lines of code.

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger)

Please ignore this 🙏 I am wrong here

[Suyash Surve]

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

 

[GreenSock]

It's impossible for us to troubleshoot by just looking at an excerpt of your code - if you'd like some help, please provide a minimal demo (like a Stackblitz or CodePen) that clearly illustrates the problem.

 

The error you're talking about definitely means that you haven't registered ScrollTrigger -or- you have a typo in your code (like your first code excerpt showed the wrong capitalization). 

[Suyash Surve]

 

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

 

 

 

 

[Suyash Surve]

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 :

 

 

[akrdesign]

@Suyash Surve Can you also share the scene.gltf file as the path location ('/model/mapleTree/scene.gltf') does not exist in the codepen demo?

 

so that I can check from my end.

 

Thanks!

[Rodrigo]

Hi,

 

As @akrdesign mentions your demo is missing the model and also you're importing a styles and script files with relative paths. Please learn how to create a demo in codepen that works first, this post can help:

Finally you can upload your demo to your assets in your codepen account:

Then you can use that link in the loader.

 

Happy Tweening!

[Suyash Surve]

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

 

[GSAP Helper]

You can just self-host your assets (put them on your server and make your URLs point there).