Scroll Trigger doesn't work for 3d models

[Daaburn]

Hey guys, new to react and gsap here, also haven't used codepen before so I don't know how to import my models and use react there - thus the code looks messy and doesn't display anything but just putting it there for you guys to better visualise the problem

 

I tried Scroll Trigger with 2d elements and they work fine, however when I try it with 3d elements it displays the usual error I see around about the missing plugin. I've tried searching for similar threads/problems but all those are for 2d elements and have not worked to solve my issue.

 

My code with gsap.to works, but the scroll trigger afterwards doesn't work. I assume the problem is related to scroll trigger for 3d models? I wrapped it in a <Canvas> element.

 

Error:

Invalid property markers set to true Missing plugin? gsap.registerPlugin()

 

Here is the code again in case codepen doesn't work:

 

import React, { useEffect, useRef } from 'react';

import { useGLTF, PerspectiveCamera } from '@react-three/drei';

import { gsap } from 'gsap';

import { ScrollTrigger } from 'gsap/ScrollTrigger';

import { useControls } from 'leva';

import { useSound } from 'use-sound';

import * as THREE from 'three';

import { useFrame } from '@react-three/fiber';

import { OrbitControls, Html } from '@react-three/drei';

 

export default function BoxTest(props) {

  const { nodes, materials } = useGLTF('./models/box.glb')

  const ref = useRef();

  const tl = useRef();

  const { scale, rotation, position } = useControls({

    scale: 0.8,

    rotation: [4.5, 6.5, 3],

    position: [-0.6, -1.4, -1]

  });

 

  useEffect(() => {

    gsap.registerPlugin(ScrollTrigger);

    tl.current = gsap.timeline();

    tl.current.to(ref.current.position, {y: 5, markers: true, ScrollTrigger: {

      trigger: tl.current,

      scrub: true,

    }})

  }, []);

 

  return (

    <>

      <ambientLight intensity={1} />

      <OrbitControls enableZoom={false} />

      <group dispose={null}>

        <group {...props} dispose={null}>

        <PerspectiveCamera makeDefault={false} far={100} near={0.1} fov={22.895} position={[7.359, 4.958, 6.926]} rotation={[-0.627, 0.71, 0.441]} />

        <mesh

            ref={ref}

            scale={scale}

            position={position}

            rotation={rotation}

            geometry={nodes.Cube.geometry}

            material={materials.Material} />

            </group>

      </group>

    </>

  );

}

 

useGLTF.preload('./models/box.glb');

See the Pen zYyNQpV by Daaburn (@Daaburn) on CodePen

[alig01]

Hey, 

 

a few things are a little bit off.

Timelines have no markers property, which caused the error message.

Also write scrollTrigger with a lowercase, if you are using it inside a timeline and declare it a line earlier.

Documentation 

 

tl.current = gsap.timeline({
    scrollTrigger: {
        trigger: ref.current, //not sure what would be a good trigger inside a 3D space, since you use OrbitControls that rotate/zoom/... the object in place, if I'm not mistaken.
        scrub: true,
        markers: true,
    }
});

tl.current.to(ref.current.position, {y: 5})

 

Since you are using React, I would highly recommend you to check out the React guides and to use gsap.context() which will help you clean up animations.

 

 

If other issues occur, please try to correct your codepen so we can take a better look at it.

 

Hope this helps and good luck.

[Rodrigo]

Hi,

 

In order to add to @alig01's great advice, there are some examples in the forums of using Three Fiber with GSAP:

 

 

 

So as you can see GSAP can be used with RTF without any issues. Check the examples in those threads to see working code.

 

Hopefully this helps.

Happy Tweening!

[Daaburn]

Hey @alig01 @Rodrigo thanks for taking the time to read and answer my question, really appreciate it!

 

@alig01 Took a look at the video relating to gsap.context(), appreciate the shout. I've made the changes as suggested but there same issue regarding the missing plugin alongside a new error of element.getBoundingClientRect is not a function

 

@RodrigoThere's no problem with using GSAP for R3F, it's just that when I try to apply scroll trigger it doesn't work.

Context: I want to create a website similar to the example below where there is a 3d model that will rotate when the user scrolls down the page. But if I think about it, in that case would I instead create invisible points on my website and use that to trigger the scroll effect for the 3d model to rotate instead of setting the trigger on the 3d model since it stays on the same canvas?

 

Additionally, since I want it to rotate everytime I scroll, would I still be using scroll trigger or is there a better alternative/library made for this?

 

https://silencio.es/?fbclid=IwAR0EghoKrFl2948h93DFTCTqv2TuPeQ2G01gRNFuikW8hXi34iIlsKMyiq0

[GreenSock]

17 hours ago, Daaburn said:

I've made the changes as suggested but there same issue regarding the missing plugin alongside a new error of element.getBoundingClientRect is not a function

If you'd like some help, please make sure you provide a minimal demo that clearly illustrates the issue and we'd be happy to take a peek. 

 

17 hours ago, Daaburn said:

Additionally, since I want it to rotate everytime I scroll, would I still be using scroll trigger or is there a better alternative/library made for this?

 

It sounds like maybe the Observer plugin could be useful. https://greensock.com/docs/v3/Plugins/Observer

 

Good luck!