Search the Community

Hey there, so I have a ScrollTrigger I've created for a 3D model on my home page. It's really amazing how I didn't know about GSAP before this. So I have this object in Threlte, which is a ThreeJs wrapper essentially (with a lot more functionality IMO and better codebase), and I have a reactive var bound to headRot (headRotation) X, Y, and Z. As the user scrolls, I'm trying to have the head rotate a fixed amount of degrees every X part e.g. so it starts at 0, and then at my first section I'd like it to be 90, then 180, 270, and 360, but for some reason tweening the head rotation doesn't work, probably because it doesn't change the reactive variable, anyways. I'd post a CodePen, but I feel like it's just my error in my code -- Portrait is just an object that was a GLB file imported into Threlte, there's nothing special about it and idiomatically it's the same as using a base Cube Oh, and the trigger is the main body content essentially, it's basically the entire body without the header and footer <script lang="ts"> import { T, useThrelte, useTask } from '@threlte/core' import Portrait from './portrait.svelte' import { Suspense, Text } from '@threlte/extras' import { onMount } from 'svelte' import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { MathUtils } from 'three' gsap.registerPlugin(ScrollTrigger) const { camera, renderer } = useThrelte() export let headPos = { x: 0, y: 0, z: 0 } export let headRot = { x: 0, y: 0, z: 0 } export let scale = 1 export let animationStarted: boolean = false let portrait: Portrait onMount(() => { const trigger = document.getElementById('main-content') // const tl = gsap // .timeline().add('start') // .from(headRot, { // y: -0.15, // ease: 'power3.inOut', // }) // .to(headRotation, { // y: 1800, // ease: 'power3.inOut', // }) const scrollTrigger = ScrollTrigger.create({ trigger: trigger, start: 'top top', end: 'bottom bottom', scrub: 3, markers: false, onUpdate: (self) => { if (!portrait.ref) return // Define the start and end values for the rotation const startRotationY = -0.15 const endRotationY = MathUtils.degToRad(-1420 - MathUtils.degToRad(-0.15)) // Calculate the current rotation based on the scroll progress // Linear interpolation: start + (end - start) * progress const currentRotationY = startRotationY + (endRotationY - startRotationY) * self.progress // Apply the calculated rotation to the headRot.y headRot.y = currentRotationY }, }) }) $: headXSize = 0 $: headYSize = 0 $: headPosition = { x: headPos.x, y: headPos.y, z: headPos.z } $: headRotation = { x: headRot.x, y: headRot.y, z: headRot.z } $: scaleFinal = scale </script> <Suspense> <Text slot="fallback" text="Loading..." color="black" position={[headPosition.x, headPosition.y, headPosition.z]} scale={[0.1, 0.1, 0.1]} /> <Portrait bind:this={portrait} {scaleFinal} position={[headPosition.x, headPosition.y, headPosition.z]} rotation={[headRotation.x, headRotation.y, headRotation.z]} color="red" /> </Suspense> I had previously removed the headRotation from the binding in case that was interfering but it didn't seem to have any effect