mosk

Hey @GreenSock thanks for the detailed info and suggestion. Didn't get to sit down and test till after midnight- but re-coding as you described above indeed fixed my issues with GSDevTools so everything is now working as expected. @Dipscom - glad you're updating the repo; that was a big help in getting past my initial problems. In terms of Drupal, although I still need to do some more reading and research, a headless version of Drupal is probably the direction I'm going, but right now, while I've been trying to just get the basics down for integrating Vue / Nuxt / GSAP & Drupal 8, I've been using a new drupal dummy site in which I'm using the (now) native REST functionality along with a REST UI module to take information I enter in a drupal 'view' and present that in json format, which I can bring into my nuxt app through an axios / GET call. I didn't see a way to direct message you in the forum options (and I wasn't sure if there was any policy about posting our emails directly here in the forums) - but if you can DM me, I can give you login credentials for the site or any other info you find helpful so you can poke around and see if you have any thoughts on best way to integrate things. Right now I don't have any specific technical hurdles blocking progress, so will hopefully make some progress on site over next few days and actually start implementing gsap in a useful manner rather than just testing out to see if things are working. Thanks to everyone on this thread for the help. Excited that everything is now primed to go and looking forward to the fun part!

Thanks for that information - will try to do some more testing tomorrow with that advice in mind and see if it fixes the issue. A reduced test case might be difficult, because I suspect it has something to do with the overall setup and integration with nuxt/vue. I'd tested GSDevTools on codepen a couple of months ago and never ran into any problems. Will post back once I've done some more testing.

Did some more testing with GSDevTools today, and it is indeed behaving inconsistently, not just on the webhost but on my localhost:3000 as well. I set up a simple test where i can click on an item to trigger a function that uses TimelineMax to run through a series of tweens. About half the time GSDevTools show up on the bottom of the screen and work precisely as expected. But the other half (just by refreshing the browser page, not changing any code), the GSDevTools show up at the same place but have no effect whatsoever. When this happens, if I drag in the right or left markers to set a range for the animation, they just snap back in place. And if I drag the dot (indicating current time of animation) and drag that around, it doesn't control the animation, and it snaps back to its original position when I release it. Here's the function that gets called whenever someone clicks a bit of text which serves as the triggering element. Note that the timeline / tweens run successfully every time, regardless of whether the DevTools work - and both console.log statements show up each time, whether or not the tools worked. runTween: function() { var tl = new TimelineMax() tl.to(".title", 2, { x: 50, y: 50 }) .to(".title", 1, { x: -30, y: -10, alpha: .5 }) .to(".subtitle", 1, { x: 30, y: 25, alpha: .5 }) .to(".subtitle", 1, { x: 40, y: 10, alpha: 1 }); console.log("Pre GSDevTools"); GSDevTools.create(); console.log("Post GSDevTools"); }, <div> <h1 class="title" v-on:click="runTween">Developing in Nuxt</h1> <h2 class="subtitle" >Integrating Drupal, Vue, Nuxt & Greensock</h2> <hr /> I also changed all of my GSAP Premium plugins to be required in the if(process.client) {} statement, rather than using a plain import statement. Should this be ok: if (process.client) { const gsap = require("gsap"); const CSSPlugin = require("gsap/umd/CSSPlugin"); const MorphSVGPlugin = require("~/assets/vendors/MorphSVGPlugin"); const Physics2DPlugin = require("~/assets/vendors/Physics2DPlugin"); const PhysicsPropsPlugin = require("~/assets/vendors/PhysicsPropsPlugin"); const ScrambleTextPlugin = require("~/assets/vendors/ScrambleTextPlugin"); const DrawSVGPlugin = require("~/assets/vendors/DrawSVGPlugin"); const ThrowPropsPlugin = require("~/assets/vendors/ThrowPropsPlugin"); const GSDevTools = require("~/assets/vendors/GSDevTools"); const SplitText = require("~/assets/vendors/SplitText"); const CustomBounce = require("~/assets/vendors/CustomBounce"); const CustomEase = require("~/assets/vendors/CustomEase"); const CustomWiggle = require("~/assets/vendors/CustomWiggle"); const myPlugins = [CSSPlugin]; console.log("through process.client"); } (I'm posting here as a continuation of this thread since this may relate to proper configuration to get Nuxt fully integrated with GSAP, but if a moderator fees this would be more appropriate as its own forum thread, please feel free to move / split this off.

Hi @Greensock / Jack & @OSUBlake Thank you for helping. As a quick reminder, I am using the cloudfare CDN's to import all of the non-premium gsap files in the opening script tag of my nuxt.config.js file. I've had the premium ones working on my local server, but hit this new issue while trying to generate files to upload to real webhost. As for the link from @Dipscom, I think I'd read that, but don't think I quite got it last week. Now I understand its importance better. And for the four plugins that were giving me error statements, if I require those inside of the if(process.client) { **requirePluginsCode** } statement as opposed to just importing them in the general script tag, that gets rid of the errors and allows me to use "npm run generate" to successfully generate a dist folder. Uploading those files to my webhost results in a working site. GSDevTools doesn't seem to be working, but I'll go back and review proper usage tomorrow since I may have just messed up something simple there. I think the rest of the tools are working, but will go through and check that more carefully over next couple of days since I'd deactivated a bunch of functions and commented various things out as I was trying to isolate the problem and just get a minimal build generated and uploaded. In terms of Tree Shaking, I placed this in my script tag: import CSSPlugin from "gsap/umd/CSSPlugin"; and this within the if (process.client) { } statement: const myPlugins = [CSSPlugin]; Is that the (a) correct way to do it? Thanks for all of the help.

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.

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)

@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!

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.

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?

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)

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.

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.

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.

@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!

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