gribchic Posted October 1, 2020 Share Posted October 1, 2020 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 comment Share on other sites More sharing options...
Rodrigo Posted October 2, 2020 Share Posted October 2, 2020 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!!! 4 Link to comment Share on other sites More sharing options...
gribchic Posted October 2, 2020 Author Share Posted October 2, 2020 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 comment Share on other sites More sharing options...
Rodrigo Posted October 2, 2020 Share Posted October 2, 2020 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!!! 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now