Jump to content
Search Community

CmdrShepardsPie

Members
  • Posts

    2
  • Joined

  • Last visited

CmdrShepardsPie's Achievements

0

Reputation

  1. 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!
  2. I'm working on an animation where I want TweenLite to update the DOM and a local variable at the same time because I need to react when it reaches a certain value (not a %, like from .progress()) const scrollPosition = { css: { x: 0 } }; TweenLite.to([this.scrollingElement, scrollPosition], 1, { x: (this.active * -260) + 20, onUpdate: () => { this.checkPosition(scrollPosition); } }); checkPosition(pos) { console.log('prop', pos, pos.css, pos.css.x); } Output: // Repeated for every frame prop Object {css: "[object Object]", _gsTweenID: "t2"} [object Object] undefined prop Object {css: "[object Object]", _gsTweenID: "t2"} [object Object] undefined // Final output prop Object {css: Object, _gsTweenID: "t2"} Object {x: -500} -500 How do I either evaluate the value of those properties during animation, or tell it to use plain JavaScript objects? Thanks!
×
×
  • Create New...