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?