CODEWITHSUNDEEP
javascriptanimationthree.jsgsap
Sophia98
Sophia98

Reputation: 339

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: enter image description here

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});
                }

            }

Upvotes: 0

Views: 1723

Answers (1)

Sophia98
Sophia98

Reputation: 339

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});

Upvotes: 2

Related Questions