timeline from the onUpdate function comes undefined since the 3.0.2

[ugo]

Hey,

 

I recently build a progressbar component using GSAP. I was able to manage with the live display of the progress using the onUpdate function from the fromTo. It was working fine under the 3.0.1 version until it comes undefined with the 3.0.2.

Is there anything I can do to fix that ?

 

 gsap.fromTo(activeBarElement, .5,
            { 
                strokeDashoffset: getProgress(fromProgress)
            },
            {
                onUpdate: (timeline) => { 
                  // since the 3.0.2 version GSAP, timeline is always undefined
                  		if(timeline) { 
  							 console.log(timeline.progress())                      
                        }
                    }
                },
                strokeDashoffset: getProgress(toProgress),
                stroke: getCssColor(toProgress),
                ease: Linear.easeInOut
            });

 

[OSUblake]

Please see this post. The animation has always been scoped to the callback.

 

 

 

[GreenSock]

Yeah, sorry about any confusion there - initially in GSAP 3, I thought it'd be convenient to default to returning the animation instance itself as the only parameter if none were defined (like onUpdateParams), but several people (Blake included) advised against that for various reasons one of which is that it's easy enough to get using the "this" keyword. So it was removed in 3.0.2 and beyond, making it behave like it always did in all previous versions before 3.0.0. Just beware that arrow functions lock scope, so you need to use a regular function. So I assume this is more like what you wanted:

 

gsap.fromTo(activeBarElement, {
		strokeDashoffset: getProgress(fromProgress)
	}, {
		duration:0.5, 
		onUpdate: function() {
			console.log(this.progress());
		}
	},
	strokeDashoffset: getProgress(toProgress),
	stroke: getCssColor(toProgress),
	ease: "none"
});

 

Better? 

[OSUblake]

And you don't have to write  onUpdate: function() {}. This syntax makes it even shorter than an arrow function in most cases.

 

gsap.to(foo, {
  onUpdate() { console.log(this.progress()); }
});

 

[GreenSock]

3 minutes ago, OSUblake said:

And you don't have to write  onUpdate: function() {}.

Good point. I wonder how far back browser support goes for that though - isn't it technically considered an ES6 feature? So, for example, IE9 would choke on that(?)

[OSUblake]

Yes, it's an es6 feature. IE will choke on shorthand method names. 

 

 

But the OP is using arrow functions, so it shouldn't matter. Arrow functions don't work in IE either.

[ugo]

Thanks Blake, it's working fine binding the this. And I use arrow functions because as the app is written in ES6, we have rules not to use regular function. Thanks for your help !