Jump to content
Search Community

Search the Community

Showing results for tags 'threlte'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 1 result

  1. 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
×
×
  • Create New...