Jump to content
Search Community

Best practices for GSAP and Nuxt?

JayLow test
Moderator Tag

Recommended Posts

Hi all,

I make static sites for clients using Nuxt and GSAP and wanted to get others opinions who do similar. When it comes to setting up GSAP, I previously did all the logic in the mounted() part of each component that used animation. I had my animation functions in a separate utility file and would pass refs in. However this quickly became tedious as every component would be slightly different, and sometimes the hydration process of vue would lead to some refs being undefined, even once mounted. 

Now, I'm testing more so using a normal js file that runs after rendering is done and uses css classes to find elements (akin to how it would be done in vanilla js with no frameworks). I much prefer this method as it makes everything take place in one file, and I can give certain elements classes if I want them to animate rather than manually calling functions and passing refs in on a per component basis. Is this considered a bad practice?


Wanted to get insight from those in similar positions. I take a lot of inspiration from sites you would see on the awwwards, so that is kind of a good indicator for the type of animation. The only weird thing i've noticed is split text will break the site when used in the latter way, but I'm trying to figure that out. If anyone has repos or examples of how they've achieved something similar, that would also be helpful. 

Link to comment
Share on other sites

Hi JayLow!

 

I just answered a similar question like 5 minutes ago about React. The concepts are still the same for Vue. 

 

And if you can share some code on codesandbox, that would be great. I might be offer up some pointers. And maybe another demo showing that split text issue. I definitely want to see what's going on there.

 

2 hours ago, JayLow said:

However this quickly became tedious as every component would be slightly different, and sometimes the hydration process of vue would lead to some refs being undefined, even once mounted. 

 

There are several reason why a ref might be undefined. It's hard to say without seeing the problem, but it's usually because something hasn't been evaluated yet, like with v-if/else. So sometimes you might need use $nextTick to let it render first.

 

2 hours ago, JayLow said:

Now, I'm testing more so using a normal js file that runs after rendering is done and uses css classes to find elements (akin to how it would be done in vanilla js with no frameworks). I much prefer this method as it makes everything take place in one file, and I can give certain elements classes if I want them to animate rather than manually calling functions and passing refs in on a per component basis. Is this considered a bad practice?

 

I'm not advising anyone reading this thread to do that, so let's just call it a bad practice for the time being. But if you are 100% sure that entire DOM has been rendered, and you aren't going to be swapping in and out other components, so it's completely static, then that should work. Sometimes it's ok to go against what most will call bad. As long it works, performs well, and doesn't open your site to vulnerabilities, then go for it. 😉

 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Hello everyone,
I was also wondering: after having done several tests, I arrived at a decomposed architecture with VueJS:

 

I initialize my tweens and subtimelines in the computed properties and mount the final timeLine to the mounted hook.

I've made a rapid and ugly sample on CodePen for those who are interested:

See the Pen ExQONzE by charlene-bx (@charlene-bx) on CodePen


 

But being also a big console.logger, I recalled that the computed are all initialized at the creation of the component... So in a way, they are launched the first time (but the animations doesn't run... And i don't understand very well why btw). But is this really a problem? The animations are only launched once they are aligned on the timeline, so in the mounted... If anyone has any suggestions for improvements, or any other suggestions, I'd love to hear about them!

  • Like 1
Link to comment
Share on other sites

I'm not at all a framework guy, but I'm struggling to understand why you'd create all those animations in the computed() hook rather than just putting them in the mounted() one where you're also putting them into a timeline. It just seems wasteful to me, like you've got these tweens created and starting to run (invisibly) before you finally add them to a timeline later at which point you can see them start to play (again). Perhaps I'm missing something, but my gut would say that it'd definitely be better to put all that stuff into the mounted(). 

Link to comment
Share on other sites

  • 3 months later...
On 6/17/2022 at 10:49 AM, Charlène Bonnardeaux said:

Hello everyone,
I was also wondering: after having done several tests, I arrived at a decomposed architecture with VueJS:

 

I initialize my tweens and subtimelines in the computed properties and mount the final timeLine to the mounted hook.

I've made a rapid and ugly sample on CodePen for those who are interested:


 

 

But being also a big console.logger, I recalled that the computed are all initialized at the creation of the component... So in a way, they are launched the first time (but the animations doesn't run... And i don't understand very well why btw). But is this really a problem? The animations are only launched once they are aligned on the timeline, so in the mounted... If anyone has any suggestions for improvements, or any other suggestions, I'd love to hear about them!

Dude, you're a legend.. Ive been trying to set up nested timelines in the mounted function but could not get it to work. This does! Thanks a million

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...