Jump to content
GreenSock

Teymooor

onUpdate callback

Recommended Posts

Hi

this is a part o f my code

function init() {
  const radiusNumber = { counts: 3 };
  const setRadius = () => {
    const rad = radiusNumber.counts + Math.random() * 6;
    return rad;
  };
  gsap.to(radiusNumber, {
    counts: 8,
    duration: 1,
    onUpdate: setRadius,
  });
  for (var i = 1; i < count; i++) {
    let radius = setRadius();
    ...
    ..
    .

why my radius radiusNumber.counts = 3, don't change to 8 ?

Link to comment
Share on other sites

Hi @Teymooor,

 

I'm not an expert in scope, which I think could be an issue here.

 

But I'm 100% sure that is highly possible that your loop will be completed far before the GSAP instance updating the value of counts is completed, so you'll never get that value in there. In fact a fairly simple loop can be completed in less than 10 milliseconds. GSAP internal clock or ticker, updates normally once every 16 milliseconds unless it is setup otherwise, but that is outside the interest of this thread.

 

If you want the value of counts to be 8 by the time you run the for loop, you should run the loop inside an onComplete callback:

const setRadius = () => {
  const rad = radiusNumber.counts + Math.random() * 6;
  return rad;
};
const doLoop = () => {
  for (i = 0; i < count; i++) {
    let radius = setRadius();
  }
};
gsap.to(radiusNumber, {
  counts: 8,
  duration: 1,
  onUpdate: setRadius,
  onComplete: doLoop,
});

Now that being said, I must say that your setup is a bit curious, since IMO there is no need to use the onUpdate to call setRadius, that callback has no effect whatsoever anywhere inside the GSAP instance, since it just returns a value.

 

Happy Tweening!!!

Link to comment
Share on other sites

thank you Rodrigo it works but without animation

can you explain why?

I put this line in a click event

gsap.to(radiusNumber, {
  counts: 8,
  duration: 1,
  onUpdate: setRadius,
  onComplete: doLoop,
});

 

Link to comment
Share on other sites

Hi @Teymooor,

 

Please provide a minimal demo, since there is no way for us to know exactly what you're trying to do with the code snippets you're providing.

 

If this is related to your previous thread with the THREEJS graveyard, please be specific about what you're trying to achieve and how.

 

Happy Tweening!!!

Link to comment
Share on other sites

here it is

See the Pen ZEoyGQp by Teymoor (@Teymoor) on CodePen

when you click on fox model , the radius changes but without animation

And again, when you click on anything other than the fox, it goes back to the first state

Link to comment
Share on other sites

That looks like just a JavaScript thing in your code - are you expecting the "radius" variable to change? You only set it once during init() and never again, When you call setRadius(), you're not actually setting radius at all. That function returns a new value, but you're not assigning it to anything. 

 

I don't have time to try to dissect everything in your demo to figure out how you're trying to use that (the minimal demo shouldn't need to have any Three.js in there - it should only take a few lines of code to demonstrate the issue in a very isolated way). 

 

Maybe you meant to have your onUpdate be this: () => radius = setRadius()

 

?

Link to comment
Share on other sites

Hi,

 

Instead of using setRadius in the onUpdate callback, use the init method:

window.addEventListener("click", () => {
  raycaster.setFromCamera(mouse, camera);

  const intersects = raycaster.intersectObjects(sceneMeshes);

  if (intersects.length > 0) {
    if (INTERSECTED != intersects[0].object) {
      if (INTERSECTED) console.log("clicked");

      INTERSECTED = intersects[0].object;

      gsap.to(radiusNumber, {
        counts: 7,
        duration: 1,
        onUpdate: init
      });
    }
  } else {
    if (INTERSECTED) {
      gsap.to(radiusNumber, {
        counts: 3,
        duration: 1,
        onUpdate: init
      });
    }

    INTERSECTED = null;
  }
});

That kind of works, I don't know if it is exactly what you're looking for, but at least you can see the updated values reflected in the renderer.

 

Happy Tweening!!!

Link to comment
Share on other sites

21 hours ago, GreenSock said:

That looks like just a JavaScript thing in your code - are you expecting the "radius" variable to change? You only set it once during init() and never again, When you call setRadius(), you're not actually setting radius at all. That function returns a new value, but you're not assigning it to anything. 

 

I don't have time to try to dissect everything in your demo to figure out how you're trying to use that (the minimal demo shouldn't need to have any Three.js in there - it should only take a few lines of code to demonstrate the issue in a very isolated way). 

 

Maybe you meant to have your onUpdate be this: () => radius = setRadius()

 

?

yes i want to change radius only, but when i call setRadius() on onUpdate does not happen anythings

I want the radius to change with animation when I click on the model

I would be grateful if you could take the time to solve this problem

Link to comment
Share on other sites

20 hours ago, Rodrigo said:

Hi,

 

Instead of using setRadius in the onUpdate callback, use the init method:

window.addEventListener("click", () => {
  raycaster.setFromCamera(mouse, camera);

  const intersects = raycaster.intersectObjects(sceneMeshes);

  if (intersects.length > 0) {
    if (INTERSECTED != intersects[0].object) {
      if (INTERSECTED) console.log("clicked");

      INTERSECTED = intersects[0].object;

      gsap.to(radiusNumber, {
        counts: 7,
        duration: 1,
        onUpdate: init
      });
    }
  } else {
    if (INTERSECTED) {
      gsap.to(radiusNumber, {
        counts: 3,
        duration: 1,
        onUpdate: init
      });
    }

    INTERSECTED = null;
  }
});

That kind of works, I don't know if it is exactly what you're looking for, but at least you can see the updated values reflected in the renderer.

 

Happy Tweening!!!

Unfortunately, due to the randomness of the radius and angle of the cubes, what is happening is not acceptable.

Link to comment
Share on other sites

Hi,

 

Unfortunately this is a bit beyond our scope. I don't know enough about THREE in order to offer a solution to this, if what you're after is move the blocks away from the fox. I have a couple of ideas but don't have a lot of time to go through them now. I'll circle back to this and see if I can offer a better solution when I have time.

 

Sorry I can't be of more assistance. Hopefully another user with more experience in THREE can offer a better insight.

 

Happy Tweening!

Link to comment
Share on other sites

Yeah, GSAP is doing exactly what you're asking it to do. I really don't understand the effect you desire or what you think the problem is, but we're happy to answer any GSAP-specific questions. otherwise, like @Rodrigo said, we don't have the bandwidth to offer free general consulting services.

 

Right now, your code is updating your value with randomness on every single tick of the animation. Maybe you just wanted to choose an end value that's random and animate there rather than constantly changing it on every tick? If so, you need to rework the logic in your demo accordingly so that you're just feeding in the new end value and probably an onUpdate to trigger re-rendering with the new value. 


Good luck! 👍

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×