Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by SJH

  1. 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: [


    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
    created: function () {
    this.gsap = gsap;
    this.DrawSVGPlugin = DrawSVGPlugin;
    this.MorphSVGPlugin = MorphSVGPlugin;
    this.RoughEase = RoughEase;
    if (process.client) {
    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. If I drop a gsap call into this method (which is in a mixin for Nuxt), I get the message "gsap is not defined". As soon as I remove gsap, I don't have any problems and the code executes without a hitch. I would post a minimum demo but I'm using Nuxt AND a mixin, so I don't think it's something I can replicate on codepen.io.

    Thanks for the help.

    export const getColorMethod = {
        methods: {
            getColor() {
              console.log("getColor IN MIXIN is called");
                gsap.to(".gsapTest", { x: 100 });
                if (this.getColorCalled == false) {
                    for (let i = 0; i < this.pathIDs.length; i++) {
                        let pathID = this.pathIDs[i];
                        let theItem = this.$el.getElementById(pathID);
                        if (theItem.hasAttribute("style")) {
                    this.getColorCalled = true;
                return this.$store.getters.getCurrentColor;

    In the main file that calls the mixin, I have gsap imported as well as the mixin:

    import { gsap } from "gsap";
    import { getColorMethod } from "~/mixins/getColorMethod.js";
      mixins: [
  3. If I remove the drawSVG call from JS, then the green check mark appears on screen because the mask's stroke color is set to "#ffffff". Because the mask is white everything underneath it will be fully visible. I don't want that. Here's the pen:

    See the Pen PoKyNga by sandalwoodsh (@sandalwoodsh) on CodePen

    I want the green check mark to be hidden i.e. not visible. So, I can set the stroke on the mask to "#000000". Now the check mark is hidden because the black mask is hiding everything. That's what I want. Here's the pen:

    See the Pen porxbVy by sandalwoodsh (@sandalwoodsh) on CodePen

    OK, so all I have to do is set the stroke color back to white (stroke: "#ffffff") when I call the drawSVG, but the result isn't what I expect:

    See the Pen MWvPeXb by sandalwoodsh (@sandalwoodsh) on CodePen

    There you go, I think this fully describes the issue I'm running into.

  4. I'm essentially using the same code as what I have here in codepen but I'm using it in Nuxt.js. I have a base card component with many <svg>s; with one of the <svg>s housing the check mark path. The problem is, on npm run dev, the check mark, appears on every card. I want the check mark hidden until the user has selected and closed each card. Any thoughts? Seems quirky.

    See the Pen OJjoGGm by sandalwoodsh (@sandalwoodsh) on CodePen

  5. 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.

    • Like 3
  6. Followed the instructions:  npm install ./gsap-bonus.tgz from https://greensock.com/docs/v3/Installation?checked=core,drawSVG#esModules


    Included the following code in my nuxt component:

    import { gsap } from "gsap";
    import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
    if (process.client) {


    When I execute: npm run dev, I get a dependency was not found error. This actually makes sense to me because when I look inside my node_modules/gsap/dist folder "DrawSVGPlugin" doesn't exist.


    I was previously using the non member/non plugin version of GSAP, if that makes a difference.