Jump to content
GreenSock

SJH

ShockinglyGreen
  • Posts

    25
  • Joined

  • Last visited

Everything posted by SJH

  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.
  16. Thanks OSUBlake. I don't I have DrawSVGPlugin in "gsap/dist/DrawSVGPlugin It doesn't exist. Thoughts?
  17. I am using Club Greensock in production. That's what I'm saying...it's not working. Thoughts? I wouldn't have been able to go through the steps I listed above unless I was a Club Greensock member and I could download the tgz file.
  18. 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) { gsap.registerPlugin(MorphSVGPlugin); } 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.
  19. Thanks for the solution and quick reply, Jack.
  20. I can change the color of each SVG 'card' but I'd like to target just the text within each SVG 'card'. Because I have a lot of cards to target, I don't want to give each text item within the SVG a unique identifier. I just want to be able to rollover each card and have GSAP only target the text of the current card. Thanks for the help.
  21. Both of your replies are correct: I ran the GSAP 3 code ( gsap.to(targetObject, { duration: 2, rotationY: "+=180" }); today and it worked perfectly! OSUblake: yes, the syntax notes warned me the second solution was deprecated. Thank you both for your quick reply. Maybe this small thread can help someone else in the future.
  22. I'm simply flipping a card but I don't understand why one line of code works and the other doesn't. Could someone please explain why this code in GSAP3 doesn't work: gsap.to(targetObject, { duration: 2, rotationY: "+=180" }); And this version does work, even though the to of gsap.to is struck out in VSC: gsap.to(targetObject, 2, { rotationY: "+=180" });
  23. SJH

    Len's flare

    I took a look at this post: https://greensock.com/forums/topic/19429-flare-effect-with-trail/ I suppose something like that could create a light streaming effect if instead of the trails dancing around randomly, they all went out from a single point. Almost like a particle emitter. The look I'm going for would be more like sunbeams coming out of a light source. A lens flare would be great but maybe a little to complex.
  24. SJH

    Len's flare

    Anyone know how I could create a lens flare animation. Basically I want to have two streams of different colored lights emanating from a single point. It would be great if both streams of lights changed over time.
×