Three. Js and Gsap Scale Animation

So I'm trying to do a mousemove event in three.js where the user would hover over a geometry and then it would scale. So for the animations I am using GSAP as tween doesn't seem to be working for me. However, I keep getting this error when I want to scale my geometry:

I don't know why because in the official gsap documentation they use scale, without a plugin I believe. Here is an example from their website

gsap.to(".box", 1, {
    scale: 0.1, 
    y: 60,
    yoyo: true, 
    repeat: -1, 
    ease: "power1.inOut",
    delay:1,
    stagger: {
      amount: 1.5, 
      grid: "auto",
      from: "center"
    }
  });

Here is my code:

function init () {

/*------Bunch of three.js code and initialsation*/
 window.addEventListener('mousemove',onMouseMove);

}

function onMouseMove(event) {

                event.preventDefault();
                mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
                raycaster.setFromCamera(mouse,camera);

                var intersects = raycaster.intersectObjects(scene.children, true);

                for(var i = 0; i < intersects.length; i++) {
                    gsap.to(intersects[i].object.scale, {duration: 1, scale: 0.8});
                }

            }

1 Answer

So I figured the answer. It seems that in three.js, the gsap scale property doesn't work so you need to make sure you're referring to scale before adding transformations, and then use x and y (or maybe z - I haven't tried) to increase or decrease the size. This is the code that worked for me:

gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Sophia Al-Mansoor

Sophia Al-Mansoor

Global Business & E-Commerce Reporter

Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.

Share this article
Twitter Facebook Pinterest