Search the Community

My question leans more to a THREE problem than to a GSAP problem, I suppose. But I know that there are some THREE enthusiasts on this forum, and given the fact that this is the best JS-related forum anyway, I dare to post my question hoping you don't disagree with me too much... Thank you in advance! I couldn't get my example working on CodePen, so I prepared one on Stackblitz, hope that's ok: https://stackblitz.com/edit/nuxt-starter-d1zs6g?file=components%2FPointCloud.vue In this example there are several PointClouds that can be loaded into a THREE canvas (in a Nuxt app). A deletePlyModel function takes care of unloading the current model before a new one is loaded: const deletePlyModel = () => { // If no model is currently loaded, do nothing if (!currentPlyModel) return; // Find the point cloud object in the scene const pointCloud = scene.getObjectByName(currentPlyModel); // If the point cloud object is found, dispose and remove it if (pointCloud) { pointCloud.geometry.dispose(); pointCloud.material.dispose(); scene.remove(pointCloud); // Clear the currentPlyModel reference currentPlyModel = null; } render(); // Update the scene }; Even though I am not sure if everything is correct with this dispose function, it works. What I would like to achieve is to implement some animation (fade out, scale, etc) on the points of the pointcloud before they are removed from the scene. (Much like lumalabs.ai does it, if anybody is familiar with that site.) But even with the help of AI I am not able to achieve a working result. First I tried this: const timeline = gsap.timeline(); timeline.to(pointCloud.material, { opacity: 0, duration: 1 }); Gemini.ai suggested some other solutions, the last one was to loop over the colors after converting them to their Float32 pendent: function hexToNormalizedRgb(hex) { const r = (hex >> 16) & 0xFF; const g = (hex >> 8) & 0xFF; const b = hex & 0xFF; return [r / 255, g / 255, b / 255]; } const deletePlyModel = () => { // [..] if (pointCloud) { const timeline = gsap.timeline(); const normalizedFadeColor = hexToNormalizedRgb(0xffffff); pointCloud.geometry.attributes.color.array.forEach((color, i) => { // Access the color components directly const colorElement = pointCloud.geometry.attributes.color.array[i]; timeline.to(colorElement, { x: normalizedFadeColor[0], y: normalizedFadeColor[1], z: normalizedFadeColor[2], duration: 1, delay: i / pointCloud.geometry.attributes.color.count * 0.5 }); }); } } This resulted in GSAP target 0 not found. What would be the proper way to apply a fadeout or a scale function (staggered) to those points?

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.

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

I need to move camera on scroll. Im trying do somthing similar like this https://virtual.plus-ex.com/showroom when you enter easy mode camera moves and rotate automaticly on scroll. I want to turn camera on Y: -11 when its reach 800 pixels with animation. In my codepen its already works but without animation

Hello every one , i found so trouble in use scroll trigger with react three fiber , so can any one help me ? or i have to learn some thing befor ?? i saw an example but never see what i need to do thank's