@OSUblake
After a lot of testing, I think I got it working reliably. In cases where the child components mounted before the parent, the selector utility worked fine. However, I had cases where the opposite occured, and the mounted of the parent ran before any of the children, which led to nothing returning with the selector utility. I couldnt get $nextTick working reliably either. I had some cases where it worked fine, others where children were still rendering by the time it rain.
What I ended up doing, was create a timeline on the parent component in its created() hook, and have each child pass up its tween in an $emit listener, which adds it to the parent timeline and kills the childs scrolltrigger. That way, children can work by themselves or be merged with a parent if its available.
The parent sets up a scrolltrigger on its mounted() hook because thats when the DOM is available
Example of child:
props: {
text: {
type:String,
required:true
}
},
mounted() {
console.log('child mount')
this.animation = split(this.$refs.text)
this.$emit('child', this.animation)
},
data() {
return {
animation:{}
}
},
Example of parent:
export default {
data() {
return {
timeline: null,
childElements:[]
};
},
methods: {
fillTimeline(el) {
this.timeline.add(el.progress(0).pause(0).delay(0).play(0), '<+=.3')
},
addchild(anim) {
anim.trigger.kill()
anim.animation.pause(0)
this.fillTimeline(anim.animation)
}
},
created() {
this.timeline = timelineInit();
},
mounted() {
timelineTrigger(this.$refs.trigger, this.timeline)
}