I'm trying to expand an element's height from 'auto' to '100%', and reverse it. By just using `to()` percent height, there's a slight jolt in height due to percent-to-pixel rounding. So in order to circumvent that, there was another post that suggested to predetermine the heights before starting the tween.
The two issues I'm having right now are:
Timeline is compiled ahead of time, but I thought the whole point of a property function was that it was executed during runtime (deferred).
During reverse, I would like to do the opposite, swapping the starting and ending property values, but the property function is not executed during runtime.
What is the method for calculating runtime start values? I saw some posts suggesting to create a new timeline, but that seems heavy handed since one would have to cache the playback position, recreate the timeline, resume from the cached position in reverse, and possible do this multiple times if the user decides to change the window size or hide other elements affecting the height value during other parts of the tween.
Is Timeline at all capable of runtime start values?
Here's an excerpt of the timeline:
let startHeight
let toHeight
return new TimelineLite({paused: true})
...other tweens
.to(this.elSpinnerWrapper, tweenDuration, {...tweenProps, opacity: 0})
.set(this.elSpinnerAndPickerWrapper, {height: '100%'}) // <--- This is the element to expand/contract
.call(() => toHeight = this.elSpinnerAndPickerWrapper.offsetHeight)
.set(this.elSpinnerAndPickerWrapper, {height: 'auto'})
.call(() => startHeight = this.elSpinnerAndPickerWrapper.offsetHeight)
.set(this.elSpinnerAndPickerWrapper, {height: startHeight})
.to(this.elSpinnerAndPickerWrapper, tweenDuration, {...tweenProps, height: () => toHeight})
// ...other tweens
Any suggestions would be appreciated.