I am using Vue and all elements are referenced with ref
I only have 2 calls that involves referencing elements as target (the rest are target = window).
One of them is a sidebar that never gets hidden and has
//<div class="sidebar" @mouseleave="debouncedScrollTop()" @mouseenter="debouncedScrollTop.cancel()">
// <div class="holder" ref="scrollElement" v-perfect-scroll="{ suppressScrollX: true }" v-on:ps-scroll-y="debouncedUpdateLeftBoxPositions">
// </div>
//</div>
export default {
methods: {
scrollTop(){
this.$scrollTo(this.$refs.scrollElement, 0.5, { scrollTo: 0 })
}
},
computed: {
debouncedScrollTop(){
return debounce(() => this.scrollTop(), 1000)
}
}
}
the this.$scrollTo is the wrapper in the first post. I have no v-ifs in this sidebar, the element is always there.
the v-perfect-scroll is a directive that applies new PerfectScrollbar(target) -> this 3rd party does not replace the element, only applies some classes and some children elements
the second one is a modal component that is always in the DOM of the current component. The js method is this
export default {
methods: {
scrollToTop(){
if(!this.$refs.thumbsHolder)
return false
this.$scrollTo(this.$refs.thumbsHolder, 0.5, { scrollTo: 0 })
}
}
}
In both cases: the element is always in the DOM and is called only by its parent component, so it is not called before it was rendered
My initial thought was that the modal was causing problems when the route would change and the modal would disappear in the middle of the Tween.
But I've set a tween of 10 seconds and changed the view in the middle of it and it did not cause any problems
I really don't have anything more to show you guys... I've set a wrapper that explicitly checks the target element and it exists at the moment I fire TweenLite.to. The real component is more complicated and I cannot copy/paste it here. I've tried to remove unnecessary children from the template and chunks of js to be more readable.. But other than what I already posted, there is not much more relevant stuff to see
I've fallen back to jQuery animate for now to see if it generates similar error