critbob

@OSUblake Superhero for a reason, thanks again man!

Sorry for the confusion. For explanation, given a stand-alone vue component like below, I can target both template elements (.my-class) AND the component's data (this.data.percent) : <template> <div class="my-class"> // animate with the first 'to' tween in mounted. Lorem ipsum, dolor sit amet... </div> </template> <script> export default { data () { return { percent: 0 // animate with the second 'to' tween in mounted. } }, mounted () { var tl = this.$gsap.timeline() tl.to('.my-class', { x: 1, duration: 2, ease: 'slow' }, '+=0.5') tl.to(this.data, { percent: 1, duration: 1, ease: 'power2.in' }, '-=1') } } </script> However in the event bus, I have not found a way to manipulate the component's data (this.data.percent) ...

@OSUblake So it seems this mostly works. But so far not entirely. I can target template elements from within animationBus by referencing the element's class (or ID). So this works: export const animationBus = new Vue({ methods: { addAnimations: () => { // Any simple timeline for proof of concept. var tl = gsap.timeline() tl.set('.my-class', { opacity: 1 }) tl.to('.my-class', { opacity: 0, duration: 2, ease: 'slow' }, '+=0.5') } } }) But I can't target the component's model data directly. So this doesn't work: export const animationBus = new Vue({ methods: { addAnimations: () => { // Any simple timeline for proof of concept. var tl = gsap.timeline() tl.set(this.data, { percent: 1 }) tl.to(this.data, { percent: 0, duration: 2, ease: 'slow' }, '+=0.5') } } }) console.error: TypeError: _this is undefined Am I conceptually on the right track? Ideally I'd like to have the ability to animate both template elements and data elements in the same timeline. Any ideas on how to target the component's data from within the event bus? And for curiosity's sake, since you mentioned that there are a lot of ways to accomplish this, could you reference any other methods that come to mind? (even if it's just a search term for me to google.) Thanks again for the help!

@OSUblake Seems like a great solution, thanks so much for responding!

I’m having a hard time finding info on the best practice for controlling multiple animations across several Vue components in a single gsap timeline. Can anyone point me in the right direction on how to structure the code so it’s easily maintainable? Should this be done in state management (vuex)? If so, any ideas on how best to structure it? Example on-page-load animation: 1. Animate data variables in an html canvas in the Canvas.vue component, then… 2. Animate Logo translateY in the Logo.vue component, then… 3. Animate Nav translateY and opacity in Nav.vue component... 4. Etc… Any help is appreciated.