Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gribchic

Import gsap to Vue project

Recommended Posts

Tell me please how to add gsap + plugins to project.
I've tried to add in main.js:
 

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
Vue.use(gsap);

but it doesn't work.

Should I add gsap and plugins in each component like in the article

 

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

I wouldn't expect it to work because as far as I can tell, the main use() method in Vue is reserved for Vue specific plugins like VueX, Vue Router, etc. While GSAP will work with Vue without any issues, you'll have to import it in every component you use it, like you mentioned.

 

Here is the API docs about Vue.use(): https://vuejs.org/v2/api/#Vue-use

 

Happy Tweening!!!

  • Like 4
Link to post
Share on other sites
8 hours ago, Rodrigo said:

Hi and welcome to the GreenSock forums.

 

I wouldn't expect it to work because as far as I can tell, the main use() method in Vue is reserved for Vue specific plugins like VueX, Vue Router, etc. While GSAP will work with Vue without any issues, you'll have to import it in every component you use it, like you mentioned.

 

Here is the API docs about Vue.use(): https://vuejs.org/v2/api/#Vue-use

 

Happy Tweening!!!

Thanks a lot.

Link to post
Share on other sites

Hey,

this.gsap.to(this.$refs.element, { /* Config Here */ });

 

So this kept going in my brain since there is an actual way of sharing stuff in different Vue components: MIxins.

 

You can do something like this:

mport Vue from "vue";
import App from "./App.vue";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

Vue.mixin({
  created: function () {
    this.gsap = gsap;
  }
});

And then in a component file use gsap like this:

this.gsap.to(this.$refs.logo, {/* GSAP Config Here */});

Here is a working example: https://codesandbox.io/s/gsap-global-mixin-vue-ytf29

 

I asked around in Vue's official discord channel and this is the answer from one of the channels admins:

Quote

ultimately, GSAP is an object
the one thing we know about objects is that they're being passed as a reference
storing a reference, even storing 1000 of references, is not a crime, it's got no real effect to performance
if you feel you don't want to import it in each file you use it in
and you use it in a large amount of files
then feel free to do it
would I do it personally? I wouldn't but I don't see it as a crime
and the only reason why I wouldn't would be so that other people looking at my code later don't have to play a guessing game where does it come from

 

So you can use it, but if other developer(s) looks at your code they might not know what this.gsap actually is until they look in the entire folder structure.

 

If you ask me, I agree with the official answer and I wouldn't do it, but is up to you.

 

Happy Tweening!!!

  • Like 2
Link to post
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.

×