Search the Community

First of all sorry, but I can't provide a codepen, I will try to describe the problem the best I can. Basically I have this type of structure: <div class='middle'> <div class='canvas-holder'> <!-- [Three.js Canvas] --> </div> </div> This is the CSS each of this element have: .middle { position: relative; margin-top: 7rem; } .canvas-holder { position: absolute; height: 100%; // [Three.js Canvas] canvas { position: sticky; top: 0; } } The Three.js canvas has a certain size (window.innerWidth, window.innerHeight), with GSAP I wanted to animate the position of a model inside the Three.js canvas. I wanted to move up the model by 5 when I scroll, so I wrote this: // peeler_model is the model I want to move gsap.to(peeler_model.position, { y: 5, scrollTrigger: { target: middle_div, // I wanted to take the div as a reference point for the markers start: "top top", end: "bottom bottom", scrub: true, markers: true } }) Now with this what I thought would've happened is that by setting the target as the middle_div the first top at the start would have went at the top of the middle_div like this: But instead what happened was that START went at the top of the body. I don't know how to really fix it, I used percentages instead of top and bottom to fix it a bit, but it would be really helpful if top would go at the top of the target like it always did for me. The only thing I can think of of why this is happening is because the canvas has a parent with absolute positioning, but that's really strange. Anyways thanks in advance for the help.

Hey, Can someone help me recreating this backgorund effect: https://kota.co.uk/. Best, Jonas

Hi there! I am trying to make a Landing page where it is a concept of blackhole in which images slowly fade inside blackhole while rotating. I saw it in an example where it is made using Three.js the reference site is https://www.cosmos.so/ I want landing page and the effect it got on first scroll.

I work on ADHS-Gutachten.de I use scroll triggers to control the ThreeJS scene and the divs and their contents. Everything works very well at first. But: If I use the scroll bar and quickly scroll from top to bottom, various elements stop. I suspect that since the animations are not finished but the user scrolls past the trigger, the information to continue the animation is missing. I use the following code that repeats itself for all elements: With different classes, of course. const tlBackA2 = gsap.timeline({ scrollTrigger: { trigger: ".B", start: "100% 50%", end: "100% 50%", toggleActions: "restart none reverse none", } }); tlBackA2.fromTo(".A2", { y: "0vh" }, { y: "-75vh", duration: 0.5, ease: "power4.inout" } ).delay(0.4); const tlBackA2o = gsap.timeline({ scrollTrigger: { trigger: ".C", start: "100% 50%", end: "100% 50%", toggleActions: "restart none reverse none", } }); tlBackA2o.fromTo(".A2", { y: "-75vh" }, { y: "-150vh", duration: 0.5, ease: "power4.inout" } ).delay(0.4); I need information on how to set the positions of the classes at the beginning or end of each timeline, even if the animation of the timeline and the associated trigger have not yet been completed. The trigger has already run through. Maybe I think too complicated and it is a total beginner problem Can anyone give me a reference to a tutorial or tell me what I have forgotten in this code and what I need to pay attention to? Thanks for your time and help Thom

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

Hi. I've been stuck on this issue for 3 days now. I went through all the docs, StackOverflow answers, gsap docs, codepens, gpt 4 answers etc, but I still can't figure out what is going wrong with my component. Maybe I'm just too stupid. Anyway. Here's the codesandbox (took me hours to figure out how to do this without bringing all the code and an entire nextjs app, so i just copied the styles and recreated the important components) https://codesandbox.io/s/lingering-pine-rkgr79?file=/src/components/FrontPageScene.tsx Unfortunately, i didn't use codepen. The animation should work as such: brain model moves left, then stays there for the entirety of the pinned element, then goes right when the footer appears. This works, but if you resize the window (not even fully to mobile) you'll notice that it starts to break and it doesn't recover. On mobile it should rotate the model, which doesn't work at all, but I'm guessing that's a threejs issue i also am trying to figure out.... It looks like when I resize, the pinned component "height" is completely ignored in the scrolltrigger calculations afterward. Any help would be super appreciated and i apologize if somehow i made dumb mistakes.

I am trying to create two subsequent animations on the cube in react-three-fiber. But I want to run the second animation(animateY) after I finish the first animation(animate) and that's why I am using onComplete function for the same. But I am getting the desired results as both animations run simultaneously. I have shared the relevant code and output for the issue. _med.mp4

Hello, so I have a 3D element made with Three.JS that is perfect. I try to modify it with gsap and scrollTrigger. I tried to do it with one trigger first and it worked perfectly. But when I try to to multiple changes to that element at different time with scrollTrigger it changes the original element's value. Like in the codePen when you first scroll you see that the square is not really a square at the begining but when you scroll a bit more It jumps to a square. And I don't know at all why it happens. I also tried to put a fromTo to all but did not change a thing. I really need help plz :))

I want to change the widthSegments of my box using a gsap timeline, but when I try it's doing nothing. For now, I've tried this: const tl = gsap.timeline(); tl.fromTo( cubeGeo.parameters, { widthSegments: 1, yoyo: true, repeat: -1, }, { widthSegments: 2, yoyo: true, repeat: -1, } );

Hi, Its been a week since I started working with GSAP, so I am very noob, I came across this animation in ThreeJs and I was wondering if such thing is possible with GSAP.

Hi, I'm trying to achieve a basic threejs animation using GSAP scroll trigger. but its not working here (codepen sample).

const assetLoader = new GLTFLoader(); var mixer; var model; assetLoader.load("https://cdn.glitch.global/5213cd0b-d594-4b34-9064-2f1f38b42c78/cube33.glb?v=1665271977633", function(gltf) { gltf.scene.traverse(function (node) { if (node instanceof THREE.Mesh) { object.frustumCulled = false; node.castShadow = true; node.material.side = THREE.DoubleSide; } }); model = gltf.scene; model.scale.set(1,1,1) model.position.setY(-1); model.position.setX(2); model.position.setZ(-2); model.rotation.x = Math.PI / 2; model.rotation.y = Math.PI / 2; model.rotation.z = Math.PI / -2; scene.add(model); camera.position.z = 4; /// MIXER&ACTION CONFIG/// mixer = new THREE.AnimationMixer(model); var action = mixer.clipAction(gltf.animations[1]); action.play(); var actiona = mixer.clipAction(gltf.animations[1]); action.play(); createAnimation(mixer, action, gltf.animations[1]); } ); var clock = new THREE.Clock(); function render() { requestAnimationFrame(render); var delta = clock.getDelta(); if (mixer != null) mixer.update(delta); renderer.render(scene, camera); } render(); function createAnimation(mixer, action, clip) { let proxy = { get time() { return mixer.time; }, set time(value) { action.paused = false; mixer.setTime(value); action.paused = true; } }; /// GSAP CONFIG/// function GSAP(){ gsap.registerPlugin(ScrollTrigger) ScrollTrigger.defaults({ scrub: 3, }) gsap.set(model.position, {x:-0.70,y:-1.80 ,},) gsap.to(model.position, { scrollTrigger: { trigger: ".section-four", start: "top top", toggleActions: "restart play none reset", //onLeave: myLeaveFunc, //onLeaveBack: myLeaveFunc end: '+=2000px', }, x:-1, y:-3 , }); let scrollingTL = gsap.timeline({ scrollTrigger: { trigger: ".section-four", ease: "Power4", end: '+=5000px', pin: true, scrub: 2, onUpdate: function () { camera.updateProjectionMatrix(); } } }); scrollingTL.to(proxy, { time: clip.duration, repeat: 0, }) /// I NEED TO RUN ANIMATION [1] HERE /// let scrollingTL1 = gsap.timeline({ scrollTrigger: { trigger: ".section-five", ease: "Power4", end: '+=5000px', pin: true, scrub: 2, onUpdate: function () { camera.updateProjectionMatrix(); } } }); scrollingTL1.to(proxy, { time: clip.duration, repeat: 0, }) } GSAP() }

My camera lags very much.. I dont know why. When its reaches trigger 5 its rotates and then it becomes normal. and when its reaches trigger 7 its lives own life:(

Hi, I'm new to this area of gsap, I was looking for projects that had Threejs and Gsap as tools. Reference: https://architect-opinion.art I was thinking of doing something similar/prototype for the above reference. His concept of "camera" following a path that was "modeled", "generated", and having some interactions within that "trip". But I don't know where to start, and I don't know the "names" people give to this kind of programming or modeling inside threejs and Gsap. Could you help me find the "names" (3d scene, scene interaction) of these codes and where possibly they are done in threejs or gsap?

Hi there lovely developer community. I‘m looking for a front end dev to do a cool little website project. It’s something along the lines of: https://croing.com/ It’s just a one pager with 2 other pages. The rest is external links. It’s pretty simple/straightforward in general, I think. But it has some 3D obj or fbx elements which need to spin around and the site should have nice transitions, UI/ rollover animations and feel fluent/responsive. If you know what I mean? I’m a creative designer. Not a developer but I imagine it's WebGL using ThreeJS or some sorts. I have figma design and all the 3D assets etc. ready to go If you are interested please get in touch Thank you very much Sebastian

Hello, So i used the ScrollTrigger skew example to tilt the three js camera instead the image skew property. Apart from that, a text div is being translated and sphereGroup is being rotated using gsap value & it is working nicely The problems i face with velocity are: 1 ) there is no smoothing happening when going to the calculated position 2) the above problem also leads to jerk when scroll direction is switched it 3) with mouse wheel the the incremental jumps does not look nice (which could also be solved with better smoothing maybe?) any tips ? suggestions for better gsap to three logic also welcome last function in codpen has all the gsap properties

Hi , have a nice day any one know how we can play gltf animation with scroll use scroll trigger ??

Hi ! Apologies in advance, I'm a musician / digital artist and a total beginner with gsap (like 2 days ago) but also very new to Js, React and Three.js. I'm really amazed how easily gsap handles animation of any params compared to other solutions I found in the past. It will make my life so much easier, I'm already considering to join the Greensock club soon...! Since yesterday I've been hitting my head against the wall and I can't figure this out. Here's the sandbox : https://7cuco.csb.app I have this button that triggers random variations of color and rotation speed of a cube. I wanted gsap to smooth every random value by a few seconds. I managed to make this happen very easily for the rotation speed (I guess because I worked from a simple object) but for some reason it doesn't work as excepted with the Three.color object. Every click resets the color to black, before moving gradually to the selected color. Almost... I'm really sorry in advance, I expect this to be a really stupid mistake. Thanks in advance for your help !

Hello , i try to add some parallax effect between camera and cube , like make the cube faster than camera any tips ?, then how i can make scroll smooth ?

Hello , i try to change light intensity on scroll with some fade using scroll trigger ``` gsap.to(nightShadowLight.intensity, { intensity:0, scrollTrigger: { trigger: renderer.domElement, start: 'top top', end: '+=500%', pin: true, scrub: true }, onUpdate: function () { }, }) ```

Hi everyone! Working on a threejs project, so I need to animate an group of values or some Vector3. In tween I used to do but with gsap it dont work, what I'm doing wrong? There are two cases. 1. Is there any difference betwenn an array or an obj? // as Array const startValues = { a: 0, b: 10, c: 20 } // as Obj const startValues = [ 0, 10, 20 ] // as Array const endValues = { a: 20, b: 50, c: 40 } // as Obj const endValues = [ 20, 50, 40 ] gsap.to(startValues, { endValues, onUpdate() { // How reach those values in both cases? }, duration: 6 }) 2. const startValue = { a: new THREE.Vector3(0,0,0) } gsap.to(startValue, { a: new THREE.Vector3(1,10,5), onUpdate() { console.log( this.targets()[0].a ) // Logs me [Object object] }, duration: 6 }) Thanks for helping!

So i would like to animate this model along a path: https://codepen.io/uiunicorn/pen/abJmVwo but it doesn't seem to work and i am getting this in console: Uncaught TypeError: Cannot assign to read only property 'rotation' of object '#<Group>' at Plugin._setterPlain [as rSet] (gsap-core.js:3367) at PropTween.render [as r] (MotionPathPlugin.js:301) at Tween.render (gsap-core.js:3163) at _lazyRender (gsap-core.js:187) at _lazySafeRender (gsap-core.js:193) at Array.updateRoot (gsap-core.js:2564) at _tick (gsap-core.js:1252) and ideas of what the problem is? here is the original pen that works: (my pen uses modules): https://codepen.io/uiunicorn/pen/zYZoYpV

Hi everyone! I was user of tween, there I can do something like this. Where e is the current value throung the time... so if I log in onUpdate the e value logs the exactly value in time. const n2bt = new TWEEN.Tween({x: 0}) .to({x:1}, 1650) .onUpdate((e) => { console.log(e.x) }) .start() } How can I do this with gsap?

My goal is update a Three JS scene (colors, camera position, material properties, etc.) based on state properties set by the timeline. My scene is rendered inside of the BlobScene component which accepts an intensity prop. In the sample below, I'd like to update the intensity as the timeline is scrubbed which then updates the light intensity of my scene. In the pinned section, there are two columns: the left column contains text that will be translated into view and the right column contains the BlobScene. My ultimate goal is to change the color of the blob for each corresponding text section. So when the user scrolls from the red section to the green section, for example, the blob mesh would smoothly transition it's material color from red to green. Am I going about this the wrong way? I can create a minimal demo if needed. import React, { useState, useEffect } from "react" import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import BlobScene from '../components/blob-scene' function Index() { let [intensity, setIntensity] = useState({value: 1.5}) useEffect(() => { gsap.registerPlugin(ScrollTrigger) // Verticals Pinned Section Story const tl = gsap.timeline() tl.from(".red", {y: "100%"}) .from(".green", {y: "100%"}) .from(".blue", {y: "100%"}); // PROBLEM LINE tl.to(intensity, { value: setIntensity(0.5) }) ScrollTrigger.create({ animation: tl, trigger: "#verticals", scroller: "#___gatsby", start: "top top", end: "+=4000", scrub: true, pin: true, anticipatePin: 1 }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener('refresh', () => window.scroll.update()) ScrollTrigger.refresh() }, [intensity]); return ( <React.Fragment> <div className="page"> <section id="verticals" className="h-screen flex items-center relative w-full overflow-hidden"> <div className="grid grid-cols-2 gap-6 h-full w-full"> {/* Grid Column 1 */} <div className="flex items-center"> <div className="relative w-full overflow-hidden h-80"> <div className="panel absolute h-full w-full red bg-red-500 text-black"> <h2>Panel 1</h2> </div> <div className="panel absolute h-full w-full green bg-green-500"> <h2>Panel 2</h2> </div> <div className="panel absolute h-full w-full blue bg-blue-500"> <h2>Panel 3</h2> </div> </div> </div> {/* Grid Column 2 */} <div className="flex items-center"> <BlobScene intensity={intensity.value}></BlobScene> </div> </div> </section> </div> </React.Fragment> ) } export default Index

Hello, have a nice day , i have problem with control in three js and gsap , any one know tutorial for this? for example i want to zoom camera with scrolling but i don't know how , and many thing like this , this is my code ` .to(camera.position, 2, { y: -11.1, duration: 2, }, "simultaneously") `