Vue3 - Reference child components from parent and add custom GSAP animations for each

[tailbreezy]

Solved:

In Vue3, they have switched some things around.

Now you have to attach a ref to <component ref="someRef" is={ Component} /> and you get a Proxy that used Reflect but it works the same.

Beforehand it was supposed to go on <router-view ref="olderWayToRef" /> and you got a Vue Instance back.

[ZachSaucier]

I know @Dipscom uses Vue a fair bit. Perhaps he has the time to stop in and share some insight.

[Dipscom]

And I was going to put down the tools for the day just now 🙄

 

Let's see if I can be of help.

[Dipscom]

Well tailbreezy, your title is a tad misleading because the issue here isn't to do with parent/child is it? It's to do with the router in between your components.

 

I have not have the opportunity of working with Vue 3 yet (kind of in the lookout for a contract who'll let me do it, wink, wink).

 

BUT, I do have some comments: Usually using watch is discouraged by myself and a few pals because it hides away the logic flow. We're all on the trigger an animation based on a method call or user interaction, not from a reactive side-effect.

 

I had a quick look at the Vue 3 docs just now - correct me if I am wrong - but are you not able to accomplish what you want/need by nesting the <transition> element inside the element displayed by the <route-view> and add the "appear" directive to trigger the animations?

 

I might try to give it a go over the weekend if I find some spare time. If you want to make double sure I try something, set a minimal demo somewhere I can fork and edit.

 

[tailbreezy]

Hey Dipscom,

I have so many questions regarding proper Vue usage in more complex frontend projects.

 

Do you have a folio I can take a look at.

 

 

[Dipscom]

Alas I do not. Not only I am a rubbish designer and do not have a personal site online - most of the stuff I have worked on over the years is behind a paywall or the code is in a private repository or it was a short lived campaign that is now offline.

 

I'm happy to have a chat and nerd around Vue if you fancy, maybe I have some opinions on the things you want to ask? Send us a message and we can look for a convenient time to chat.

[tailbreezy]

@Dipscom

 

I would love to talk about Vue best practices when it comes to making GSAP sites.

Bear in mind that I am an absolute noob when it comes to programming, and from you comment about private repos it sounds you do serious dev work.

 

As for the question at hand, I have figured it out. In Vue3 they have switched to Reflect and Proxy and it works the same way you just have to attach the ref to the component and not the router-view as it was previously.

[Dipscom]

If you meant that I don't have a laugh when I am doing development work when you said I did "serious dev work" - You're pretty spot on. I am usually a ball of stress and in a hurry.

 

The very few times that I am not doing development for work, I do have a bit of a laugh and some fun.

 

I'm glad to hear you've found a solution to you issue. I did have a quick look at the Vue3 docs and, there's plenty for me to read there, right now is not a good time for me to delve into YET another thing.

 

Regarding have a chat, by all means, let us arrange something, I'm not the top dog here but I will enjoy talking about what we think is the best approach to certain challenges. Who knows? I might come out of it with ideas and examples to put in CodePen for a portfolio. You say you're a noob when it comes to programming, do make my day and say you're an ace designer.

 

[tailbreezy]

I guess you are even deeper into the woods that I thought

 

As for being an ace designer, not really my place to say.

Some work can be found here: https://www.behance.net/kastelov

 

Currently trying to add some oomph to my projects with GSAP and Vue.

It is a long way coming, since we have always worked with dev partners in the past and the output was kinda slow, so I figured might as well learn it to test ideas quickly.

 

[Dipscom]

From my point of view, having Steve Schoger as a twitter follower earns you three letters of the ACE definition of a designer. You now have a lot to live up to in my eyes.

 

There's no harm in learning new skills - a bit of practice and you'll turn into the fabled design/developer unicorn!

 

Oh, and you do like your fonts, don't you?