Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JamesGrubb

Return a value

Recommended Posts

Hi is there a way of returning an animated value from the onUpdate function? I wanted to use the value in a paper.js script . Im using Alpine.js
something like:

var object = {value : 0}
function result(){gsap.to(object,{value:20,duration:5,onUpdate(){  return object.value.toFixed(0) }})}

var animated number = result(object) // <-- counts to 20 over 5 seconds?

 

See the Pen 0d684b0f19dd8301c565f704ebd7b8cc by limitedunlimited (@limitedunlimited) on CodePen

Link to post
Share on other sites

There's no way to return a value from an onUpdate, no. What would it be returning to? It doesn't make much sense.

 

With that being said, the onUpdate is a regular function so you can set whatever values of variables that you want inside of that function. Maybe you're wanting something like this?

text.content = object.value.toFixed(0);

 

  • Like 1
Link to post
Share on other sites

i don't know anything about paper or alpine but you can have your onUpdate function apply object.value to the text.content

 

your private pen wasn't forkable so paste this code

 

function data() {
  var object = { value: 0 };
  return {
    init($refs) {
      this.$nextTick(() => {
        function words(object) {
          gsap.to(object, {
            value: 20,
            duration: 5,
            snap:{value:1},
            onUpdate:changeNumber
          });
        }
        console.log(words(object));
        paper.setup($refs.canvas);
        var path = new paper.Path();
        var text = new paper.PointText(new paper.Point(30, 30));
        text.fillColor = "black";
        text.fontFamily = "Six Caps";
        
        text.fontSize = 200;
        text.position = paper.view.center;
        text.selected = true;
        path.add(new paper.Point(30, 75));
        path.add(new paper.Point(30, 25));
        path.add(new paper.Point(80, 25));
        path.add(new paper.Point(80, 75));
        path.closed = true;
        path.fullySelected = true;
        var copy = path.clone();
        copy.fullySelected = true;
        copy.position.x += 100;
        copy.smooth();
        path.strokeColor = "black";
        var circle = new paper.Path.Circle({
          center: paper.view.center,
          radius: 30,
          strokeColor: "black"
        });
        
        function changeNumber() {
          text.content = object.value;
        }
        
        
        paper.view.onResize = function (event) {
          // Whenever the view is resized, move the path to its center:
          text.position = paper.view.center;
          path.position = paper.view.center;
          circle.position = paper.view.center;
        };
      });
    }
  };
}


I'm using the Snap plugin to handle the rounding

  • Like 4
Link to post
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.

×