en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en de en en fr en en ca en en en en en en ro ro en en de en en en en en en en en en en en en en en en en en en en en en fr fr en en en en en en en de el nb en de el es en en en en en de el nb en de el es en en en en en de el nb en de el es en en en en en en de el nb en de el es en en en en en en de el nb en de el es en en en en en de el nb en de el es en en en en en fr de el nb en de el es en en en en en en de el nb en de el es en en en en en de el nb en de el es en en en en en de el nb en de el es en en en en en de el nb en de el es en en en en en de el nb en de el es en en en en en de el nb en de el es en en en en en de el nb en de el es en en en en en de el nb en de el es en ro en en en fr en es en de en en en en en en en en en hu en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
mosk replied to microeinhundert's topic in GSAP
I've found several Greensock threads where it looks like people had a potentially related problem, but I still haven't been able to figure out or fix the exact problem I'm having, which prevents me from using npm run generate to create the necessary files so I can upload site to actual webhost and build a functional site. One thread talked about 'Tree Shaking' - and in accord with that I added import CSSPlugin from "gsap/umd/CSSPlugin"; in my main index.vue file, right after my statement: import gsap from "gsap"; I also tried to import CSSPlugin from "gsap/CSSPlugin" - without 'umd' but that didn't fix things either. And right after requiring my varied GSAP plugins within an if (process.client) statement, I added const myPlugins = [CSSPlugin]; Tried a couple of other changes that didn't help so set those back. Added async and await to my axios get call, in case that could have been causing problems, so now looks like async callDrupalSite() { return await axios .get("https://www.mySite.com/api/movies" . . .) And everything still continues to work correctly on localserver:3000 - but I get the same error upon npm run generate, Cannot read property 'defaultView' of undefined as nuxt tries to generate you pages. (which StackOverflow person noted means) Therefore one of your pages is trying to use something.defaultView and that something doesn't exist. You'll need to look in your various pages code and find this. And that seems to boil down to this line used in several GSAP plugins: _computedStyleScope = (typeof(window) !== "undefined" ? window : _doc.defaultView || {getComputedStyle:function() {}}), Over my head right now, so would appreciate any help. Thanks.
Importing Plugins in Nuxt.js
mosk replied to microeinhundert's topic in GSAP
Hey guys - Back for more help with a general problem that may affect others as well. I have nuxt/vue working with all of the Greensock platform on localserver:3000 When I use the command: npm run generate to create a distribution folder with the files I'd need to upload to run things on my website, I received an error message which eventually tracks back to a line of code, which is found in DrawSVGPlugin, GSDevTools.js, SplitText.js ThrowPropsLPlugin.js The specific code is "undefined" ? window:_doc.defaultView || {getComputedStyle:function () {}}) Here's an example in context from DrawSVGPlugin var _doc = _gsScope.document, _computedStyleScope = (typeof(window) !== "undefined" ? window : _doc.defaultView || {getComputedStyle:function() {}}), _getComputedStyle = function(e) { return _computedStyleScope.getComputedStyle(e); //to avoid errors in Microsoft Edge, we need to call getComputedStyle() from a specific scope, typically window. Someone on StackOverflow saw my initial error message (pasted below) and noted that: The error is Cannot read property 'defaultView' of undefined as nuxt tries to generate you pages. Therefore one of your pages is trying to use something.defaultView and that something doesn't exist. You'll need to look in your various pages code and find this. That's what helped me track this down to the Greensock files mentioned above. Would appreciate suggestions on how to work around this, since I can't complete the npm run generate command so I can then upload and test files on my real server. Thanks as always for your help and suggestions. (and here's the initial error message in case that's helpful:) Entrypoint app = server.js server.js.map i Generating pages 13:47:44 ERROR / 13:47:44 TypeError: Cannot read property 'defaultView' of undefined at b0a24a811505a689c203.js:2:455 at Object.24 (b0a24a811505a689c203.js:1:0) at r (server.js:1:0) at Module.32 (b0a24a811505a689c203.js:1:0) at r (server.js:1:0) at async server.js:1:7975 at async Promise.all (index 0) at async y (server.js:1:0) at async Promise.all (index 0) at async v (server.js:1:0) at async W (server.js:1:0) at async e.default (server.js:1:0)
Importing Plugins in Nuxt.js
mosk replied to microeinhundert's topic in GSAP
@Dipscom - (and @OSUblake and @Jack / Greensock ) Thank you so much for sticking with this and figuring out a solution to the problem! That did the trick and have everything working now! I'd stumbled upon a piece of code if (process.browser) { code here } from a different thread where that was used to make sure you weren't trying to manipulate things before the DOM (and assumedly virtual DOM) were ready. Looking at that now, I see process.browser has been deprecated in favor of process.client, so will update accordingly. And I'd come across a note in the repo about require vs import and wondered if that was worth fiddling with. Really did try to troubleshoot this on my own as much as I could, but I just didn't have enough background knowledge to pull everything together - so really can't thank all of you who support Greensock enough for getting me past this hurdle. Next challenge is to integrate either with Drupal or a separate database on the backend while re-familiarizing myself with everything greensock has to offer. Have a great weekend and thanks again!
Importing Plugins in Nuxt.js
mosk replied to microeinhundert's topic in GSAP
Appreciate you helping out from the road (and no expectation that you'll continue troubleshooting while traveling; I'm just posting back so it will be available when you have time and in case it helps Dipscom figure things out) I have now completed testing on DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, PhysicsPropsPlugin, ScrambleTextPlugin, and ThrowPropsPlugin- and I've gotten all six of those (with 'plugin' in the name) to run successfully within my nuxt app - while all five Premiums without 'plugin' (CustomBounce, CustomEase, CustomWiggle, GSDevTools, and SplitText) lead to the failures and error messages I listed in a previous ppost. Looking inside my node_modules/gsap/ I do indeed see all the regular gsap files along with a package.json file. And there's also a subdirectory with umd version of the non-premium gsap files (node_modules/gsap/umd). I tried moving GSDevTools into that - so node_modules/gsap/umd/GSDevTools - and I no longer get a warning or error message when I do npm run dev, but on localhost:3000, can't bring up the site and says: ReferenceError - document is not defined and points toward node_modules\gsap\umd\GSDevTools.js as the problem.
Importing Plugins in Nuxt.js
mosk replied to microeinhundert's topic in GSAP
Sorry -this snippet came in right after my initial response. I've downloaded the umd versions of the Premium scripts, added them to an assets/vendors directory, and have been importing those. but elsewhere, I do use a generic: import gsap from 'gsap' and I did use: npm install --save gsap Is there a different way to do that to avoid mixing ES and UMD in case that's the problem?
Importing Plugins in Nuxt.js
mosk replied to microeinhundert's topic in GSAP
Hey OSUblake First off - thank you for pointing me toward Vue (which ultimately led me to Nuxt as well) a couple of months ago. Great framework that should ultimately let me do all of the cool website stuff I was hoping to do. Regarding import vs script tags, I am using all of the non-premium parts of GSAP through script tags to access the CDN It's just the Premium scripts and plugins (available in Shockingly Green as a download) that I'm trying to incorporate at this point. (and @Dipscom has reproduced at least part of the issue on his end)
Importing Plugins in Nuxt.js
mosk replied to microeinhundert's topic in GSAP
Further testing: If I try to invoke GSDevTools, SplitText, CustomBounce, CustomEase, and CustomWiggle in functions, I get the following warnings upon compiling: WARN in ./pages/index.vue?vue&type=script&lang=js& friendly-errors 13:34:03 "export 'default' (imported as 'GSDevTools') was not found in '~/assets/vendors/GSDevTools' "export 'default' (imported as 'SplitText') was not found in '~/assets/vendors/SplitText' "export 'default' (imported as 'CustomBounce') was not found in '~/assets/vendors/CustomBounce' "export 'default' (imported as 'CustomEase') was not found in '~/assets/vendors/CustomEase' "export 'default' (imported as 'CustomWiggle') was not found in '~/assets/vendors/CustomWiggle' And if I click on a div to actually trigger the function while running on server/localhost:3000, app crashes and says: vendors.app.js:393 error TypeError: Cannot read property 'create' of undefined Next, I'll test the Premium scripts that include the word 'plugin' - but so far I have not run into issues with those so far.
Importing Plugins in Nuxt.js
mosk replied to microeinhundert's topic in GSAP
Hi @Jack - thanks for the suggestions. Tried adding ".js" without effect, and tried the directory structure you mentioned with utils, but that doesn't fix things either. Hi @Dimscom - thanks for pointing me to CodeSandbox. May not help with this specific problem, since trying to get premium scripts working (and won't post those there) - but may use this in future for general help. Would be fantastic if you could show a working prototype. In terms of 'preferred' premiums, maybe start with GSDevTools and SplitText. I'd like to be able to use all of GSAP's tools, obviously, and I'm hoping once we figure out how to get one working, the rest will follow the same pattern. I'm going to do some more testing today, and will post back later once I've seen which items I can get working and which ones I can't. (curious to see if it's really that all the premiums with 'plugin' in their name work and all the others don't - or if that was just with the few I'd tested. In terms of versions of software I'm using, it should be the latest versions for node.js / npm / nuxt / and gsap - working on a Windows 10 Pro PC - let me know if I should provide specific version numbers) More later - thank you for your help.
Importing Plugins in Nuxt.js
mosk replied to microeinhundert's topic in GSAP
I've tested several of the Premium plugins, and those are all working. But I haven't been able to get any of the Premium items without plugins in their names to work - such as SplitText.js and GSDevTools.js Do those require a different method to bring them into nuxt? import PhysicsPropsPlugin from '~/assets/vendors/PhysicsPropsPlugin' import CustomBounce from '~/assets/vendors/CustomBounce' import GSDevTools from '~/assets/vendors/GSDevTools' I'm not getting an error that prevents the initial load, but if I invoke it in a function, the app fails, with a 500 error, saying object undefined. (had similar results when trying to use SplitText) runScramble: function(){ TweenLite.to("#mysplit", 3, {scrambleText:"THIS IS NEW TEXT"}); GSDevTools.create(); $metaInfo:Object meta:Array[1] title:"Cannot read property 'create' of undefined" message:"Cannot read property 'create' of undefined" statusCode:500 Getting closer - thanks for any help.
Importing Plugins in Nuxt.js
mosk replied to microeinhundert's topic in GSAP
@Lack and @Dipscom - Started from scratch with a basic nuxt project and deleted the logo (which @Dipscom noted has animation that could conflict with GSAP) - so all I have left is a single page with a title and a subtitle. Am now able to get the Premium plugins working. Not sure if I just had an incorrect path in my original project (because I'd tried many, and at one point was missing js/ from one of the paths) - or if it was that I'd missed one of the animation bits in the CSS. But working through all of that now. Thanks to both of you for your help and I can't wait to get GSAP running with this!
Importing Plugins in Nuxt.js
mosk replied to microeinhundert's topic in GSAP
Hi @Jack , These are the UMD version. After a commented section, they start with var _gsScope and I do not see any import statements at the beginning or exports at the end. (I opened the regular ES versions and see the imports and exports you mentioned). I'm happy to create a 'reduced test case' with the simplest version of a nuxt file just to see how to successfully import the premium gsap files. Is there a way to post that project to CodePen? Or should I set for universal and and use npm run generate and then share the dist folder? I imagine I'm just missing a line somewhere or off in my syntax, but right now that means I can't use the premiums at all
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“@greensock is just pure awesomeness. What more can be said?”
“...obviously GSAP is incredible”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.