JamesGrubb Posted December 18, 2020 Share Posted December 18, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted December 18, 2020 Share Posted December 18, 2020 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); 1 Link to comment Share on other sites More sharing options...
Carl Posted December 18, 2020 Share Posted December 18, 2020 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 4 Link to comment Share on other sites More sharing options...
JamesGrubb Posted December 18, 2020 Author Share Posted December 18, 2020 Brilliant, thank you! Didn't know about the Snap plugin. 😃 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now