Jump to content


  • Posts

  • Joined

  • Last visited

Contact Methods

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. In case this might help someone else, I am using Nuxt and I'm adding GSAP to global mixins, and this helped: added the following inside my 'nuxt.config.js' file... build: { transpile: ['gsap'], }
  2. 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.
  3. Thanks Blake, just made that link public. Hopefully you can see it now. In the meantime, trying to implement your suggestion.
  4. Thanks Blake, Here's the mixin in question running on codesandbox.io. I'm implementing the mixins on the googleanalyticsSVG.vue file. Once I have it ready to go, I can apply my mixins to the other cards. https://codesandbox.io/s/gsap-cards-fmxr7?file=/mixins/getColorMethod.js
  5. 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")) { theItem.removeAttribute("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: [ getColorMethod, ],
  6. I tried using the global method suggested above but I was unable to get the this.$gsap to work... this.$gsap
  7. Thanks, Cassie. I was on the right track...eventually...but your correct answer saved me so much time. I really appreciated your help.
  8. Here's a follow up question for you, Jack, or anyone else for that matter: So in the example Jack provided, the animation plays over a black background to hide parts of the animation. What would be the best way to hide these so I can use the animation on a non-black background? https://codepen.io/sandalwoodsh/pen/eYEqWoZ
  9. Thanks, Jack, the GSAP code version is exactly what I was looking for. Thanks for posting it for me. Looking at the code, I'm so happy I asked for it.
  10. I'm using the GSAP icon in a project. Can anyone point me to the GSAP code I need to make the cape fly? It would be a shame to use the icon without any animation.
  11. Thank you so much, this indeed was the solution.
  12. 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: https://codepen.io/sandalwoodsh/pen/PoKyNga 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: https://codepen.io/sandalwoodsh/pen/porxbVy 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: https://codepen.io/sandalwoodsh/pen/MWvPeXb There you go, I think this fully describes the issue I'm running into.
  13. 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.
  14. 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.
  15. OK. It seems my account was expired but even so when I run npm install ./gsap-bonus.tgz, nothing seems to change in my node_modules in the gsap folder.