Looks like the issue is the order of the parameters for the target.
changeActive(val: number) {
if (this.active + val >= 0 && this.active + val < this.items.length) {
this._changeActive(val);
const scrollPosition = { x: 0, css: { x: 0 } };
TweenLite.to([this.scrollingElement, scrollPosition], 1, { x: (this.active * -260) + 20, onUpdate: () => this.checkPosition(scrollPosition) });
}
}
checkPosition(pos) {
console.log('prop', (pos));
}
Produces:
prop Object {x: 0, css: "[object Object]", _gsTweenID: "t2"}
prop Object {x: 0, css: "[object Object]", _gsTweenID: "t2"}
prop Object {x: 0, css: "[object Object]", _gsTweenID: "t2"}
Whereas:
changeActive(val: number) {
if (this.active + val >= 0 && this.active + val < this.items.length) {
this._changeActive(val);
const scrollPosition = { x: 0, css: { x: 0 } };
TweenLite.to([scrollPosition, this.scrollingElement], 1, { x: (this.active * -260) + 20, onUpdate: () => this.checkPosition(scrollPosition) });
}
}
checkPosition(pos) {
console.log('prop', (pos));
}
Produces the expected output:
prop Object {x: -232.81704, css: Object, _gsTweenID: "t1"}
prop Object {x: -234.08424, css: Object, _gsTweenID: "t1"}
prop Object {x: -235.22856, css: Object, _gsTweenID: "t1"}
Obviously I only need x now (it seems TweenLite was adding the css: property as a string when it was the second parameter).
Thanks!