Jump to content
Search Community

Gsap target

Teymooor test
Moderator Tag

Recommended Posts

Hi @Teymooor and welcome to the GreenSock forums!

 

Sure thing, GSAP is not only for regular DOM elements, you can tween any numeric property on any object that you provide to a GSAP instance. Just keep in mind that has to be an object, not a variable. So in the case of your question it would look a bit like this:

const myObj = { count: 5 };

gsap.to(myObj, { count: 10, duration: 1, ease: "none" });

This code tells GSAP to take the number from it's current value to 10, in one second and the variation of the number will be equal throughout the duration, that is no easing function will be applied, so the change will be completely linear.

Also you can take advantage of GSAP rich callback system to update another variable as the tween is being updated:

const myObj = { count: 5 };
let radius = myObj.count + math.random * 2;

gsap.to(myObj, {
  count: 10, duration: 1, ease: "none",
  onUpdate() {
    radius = myObj.count + math.random * 2;
  }
});

Finally a couple of observations, in JS the math object starts with uppercase Math and random is a method, not a property, so it has to be invoked and not just referenced.

// This will throw an error
math.random * 2; // math is undefined

// This is the right syntax
Math.random() * 2;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

 

Here is a very simple example:

See the Pen mdLmqye by rhernando (@rhernando) on CodePen

 

Happy Tweening!!!

  • Like 1
Link to comment
Share on other sites

thank you dear Rodrigo it's so helpful for me

 

const radiusNumber = { count: 5 };
gsap.to(radiusNumber, {
  count: 10,
  duration: 1,
});
console.log(radiusNumber.count);
console.log(radiusNumber);

Why these two logs still show the number 5?

 

This line of code is inside a for loop

radius = myObj.count + math.random() * 2;

but this line is outside

const radiusNumber = { count: 5 };

how can i change just the number

Link to comment
Share on other sites

Hi,

 

Can you provide a minimal live example, please? Is kind of hard to see what the issue could be with the code you just provided. As for the console logs not showing the updated values, keep in mind that, while JS is a single threaded language, the GSAP instance will run as the browser keeps executing the rest of your JS code. If you want to check the value while your GSAP instance is running, you have to use an onUpdate callback.

 

GSAP has a very rich and unique callback system, you can check it here:
https://greensock.com/docs/v3/GSAP/Tween

 

Scroll down to Special Properties and you'll find all the available callbacks that you can use.

 

Happy Tweening!!!

Link to comment
Share on other sites

Hi,

 

The approach you have right now is the correct one in terms of restarting the GSAP instance. However I assume that you want to apply the radius value to the grave being clicked. As I mentioned before you can use the onUpdate callback to apply the value to the grave, but for that you also need to get the grave targeted grave and do the changes that you want, that is something more related with THREE than GSAP and my knowledge of THREE is extremely basic.

 

I'd encourage you to find out a bit more about THREE and how to update values on a mesh and then using GSAP to update those values should be quite simple.

 

Happy Tweening!!!

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.
×
×
  • Create New...