Jump to content
GreenSock

SJH

ShockinglyGreen
  • Posts

    25
  • Joined

  • Last visited

Community Answers

  1. SJH's post in Calling gsap within a method of a mixin in Nuxt not working was marked as the answer   
    Thanks for pointing me in the right direction, Blake. So after a little research, and a point in the right direction from this GSAP thread (Import gsap to Vue project), I decided to go with a enabling GSAP everywhere by making it a global mixin in Nuxt.
     
    (Though if you didn't want to go the global mixin route, Blake's import at the top of the mixin, would work too. I may end up using that instead of the global mixin if I run into any problems, but right now the global version seems to be working for me.)
     
    You can view the entire (on-going) project here on codesandbox.io.
    Essentially how you do it is to create a "gsap.js" file in the plugins folder of the Nuxt project, and then add the following lines to the 'nuxt.config.js' file:
    plugins: [
    '~/plugins/gsap.js'
    ],
     
    The contents of the gsap.js file are as follows (again view it all on codesandbox.io, here).
    import Vue from "vue"; import gsap from "gsap"; import random from "gsap/all"; import DrawSVGPlugin from "gsap/DrawSVGPlugin"; import MorphSVGPlugin from "gsap/MorphSVGPlugin"; import RoughEase from "gsap/EasePack"; // Make sure to pick a unique name for the flag // so it won't conflict with any other mixin. if (!Vue.__global_mixin__) { Vue.__global_mixin__ = true Vue.mixin({ created: function () { this.gsap = gsap; this.DrawSVGPlugin = DrawSVGPlugin; this.MorphSVGPlugin = MorphSVGPlugin; this.RoughEase = RoughEase; if (process.client) { this.gsap.registerPlugin(this.DrawSVGPlugin); this.gsap.registerPlugin(this.MorphSVGPlugin); this.gsap.registerPlugin(this.RoughEase); } this.random = random; } }) } I should mention that because this is a global mixin in the created hook, that means every object you create that has the created hook, will have this code. One great thing IMO about this is that you no longer need to have an import gsap line in any of your components, mixins, etc.  However, a trade-off for that is that instead of just using 'gsap' you now have to use 'this.gsap'.
     
    Here's an example snippet of code in one of the mixins:
    this.gsap.to(pathID, { duration: 0.5, fill: this.defaultColors[i], }); Please have a look at this project, especially if you want to know more about working with SVGs in Nuxt. If you have any feedback or suggestions, I would really welcome any improvements you might think of.
  2. SJH's post in DrawSVGPlugin in Nuxt not working was marked as the answer   
    It's working now. After I updated my Club Greensock account, I ran the npm install again: ./gsap-bonus.tgz from the command line. I checked the node_modules/gsap folder and the DrawSVGPlugin was listed. I guess it didn't work before because I had an expired ShockinglyGreen license. All seems good now. Thanks for you help OSUblake. Greensock has the best support. p.s. Thanks for your help too, Cassie.
×