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

Additional note to post above, First, I don't see a way to post an image here, but I've double checked my path to the premium gsap plugins and the files are indeed in assets/js/vendor/umd (I've tried placing them directly in the vendor directory as well instead of a umd subfolder, but I get the same errors) When I try to import one of the Premium Plugins, I'll get the following errors/warnings, which tell me to install the Plugins via npm, but when I try to do that, they throw another error, saying no package.json file is contained. Here are those errors for both SplitText and ThrowPropsPlugin: WARN in ./pages/gorgons_grotto/gsap_tests/index.vue?vue&type=script&lang=js& friendly-errors 10:49:37 "export 'default' (imported as 'SplitText') was not found in '~/assets/js/vendor/umd/SplitText' ERROR Failed to compile with 1 errors friendly-errors 12:59:52 This dependency was not found: friendly-errors 12:59:52 friendly-errors 12:59:52 * ~/assets/vendor/umd/ThrowPropsPlugin in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/gorgons_grotto/gsap_tests/index.vue?vue&type=script&lang=js& friendly-errors 12:59:52 To install it, you can run: npm install --save ~/assets/vendor/umd/ThrowPropsPlugin PS D:\Users\Robert\Documents\WEBSITES\nuxt\ygnuxt> npm install --save ~/assets/vendor/umd/ThrowPropsPlugin npm ERR! code ENOLOCAL npm ERR! Could not install from "C:\Users\Robert\assets\vendor\umd\ThrowPropsPlugin" as it does not contain a package.json file.

Hi @Dipscom - Yes, I've been through that repo - and I have an account on CodePen for testing and sharing, but I'm not sure how to share a nuxt application there. If that's possible, I'm happy to create a very simple nuxt application and just work on importing the premium gsap scripts/plugins. For now, I've pasted code below showing my import statement for SplitText - and this gives me the following error: "export 'default' (imported as 'SplitText') was not found in '~/assets/js/vendor/umd/SplitText' <script> import gsap from 'gsap' import SplitText from '~/assets/js/vendor/umd/SplitText' export default { data() { return { } }, methods: { dragBlueSquare: function(){ Draggable.create(".blue"); } }, methods: { runSplit: function(){ var mySplitText = new SplitText("#mysplit", {type:"words", position:"absolute"}); // console.log(mySplitText.words); TweenMax.staggerFrom(mySplitText.words, .5, {opacity:0, rotation:-180, y:-100, ease:Back.easeOut}, .02); }, // TweenMax.staggerFrom(".nuxtlink", .6, {x:"+=500", y:"+=550", opacity:.25, rotation: 720, scale:.1}, .03) }, }

Thanks for all of the info on this thread. I'm a Shockingly Green member, learning vue and nuxt, and trying to integrate GSAP right now. I used the cdn to add regular GSAP functions and that's working fine. I also downloaded the 'bonus-files-for-npm-users' and placed the umd version of the files in assets/js/vendor/umd . Could someone give a code sample of how to use one of the bonus files / scripts I've tried SplitText and ThrowPropsPlugin but have not gotten either to work. Have tried placing the following code in the script section of the main index.vue page import ThrowPropsPlugin from '~/assets/js/vendor/umd/ThrowPropsPlugin' (along with similar variants ) import {ThrowPropsPlugin} from '~/assets/js/vendor/umd/ThrowPropsPlugin' import ThrowPropsPlugin from '~/assets/js/vendor/umd/ThrowPropsPlugin.js' import ThrowPropsPlugin from '~assets/js/vendor/umd/ThrowPropsPlugin.js' import ThrowPropsPlugin from './assets/js/vendor/umd/ThrowPropsPlugin.js' App failed to load in these instances. With SplitText, the app loaded in localhost:3000, but when I clicked on text to trigger a function using SplitText, I got this error message: _assets_js_vendor_umd_SplitText__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor An error occurred while rendering the page. Check developer tools console for details. Would appreciate help in getting this to work.

Thanks - much appreciated.

ok - thanks for the explanation and links. Will spend some time learning Vue then try to get it working with GSAP. Is there a way to share things on codepen when Vue is in the picture? Are there specific steps I would need to take? Or would I just need to build a dummy site and link to that if i have problems / questions?

2 mikel and GreenSock reacted to this QUOTE Follow me on... Twitter • CodePen • Plunker OSUblake - thank you for the recommendation (and for your input throughout these forums) I'm taking a look at Vue now, but was hoping you could clarify a few things: 1) Is Greensock more easily integrated into a Vue based single page app than an Angular single page app? 2) Do you have to take special steps to use Greensock with Vue, since vue also uses a virtual DOM - or would Greensock just work as it does on static sites with multiple .html pages? 3) When you say 'GSAP works fine with Angular' - is that only for people with the coding chops to do a lot of troubleshooting, or would it be relatively simple to get GSAP and Angular working well together if I invested the time to learn the Angular framework? Thank you!

Hi - I was thinking about learning Angular and NodeJS, since I'd like to take advantage of the features for a single page app. But I also want to use GSAP for my animation, and I'm not eager to commit the time and effort to learning Angular and NodeJS if I'm likely to run into lots of obstacles when I try to implement GSAP. I've read this article: https://medium.com/@philipf5/patterns-for-using-greensock-in-angular-9ec5edf713fb from about 9 months ago. Was wondering what the current state of affairs was between GSAP and Angular and whether or not improved / easier integration was in the works. Would love to take advantage of everything together, but I don't have a background in programming, and while I don't mind diving into new platforms, i do have to allocate my time and don't want to bite off more than I can chew. The site I'd like to (re) build is graphics rich, with customized images along the left serving as primary navigation buttons. Depending which section is chosen, an additional set of images would appear on the right of the screen to serve as nav buttons within that section. And depending upon which of those were selected, an additional row of nav buttons could appear at the bottom, giving access to further subsections within that particular subsection. Each button triggers a primary / secondary / or tertiary sign to dropping down from the top to show user what section (or subsection or sub-subsection) they're now in - and I'd like to avoid having to reload the navigation buttons/signposts on every page (hence consideration of single page app). Originally this was built in Flash on the Gaia framework (which allowed creation of single page app) - and now I'm trying to rebuild with HTML 5 / JS / CSS. If Angular plus GSAP is likely to present ongoing challenges/difficulties, I could potentially build things where each main section becomes a single page, and I could use GSAP to handle all of its sections and subsections (animating buttons around, swapping out images and text based on selected subsections) - and that would mean I'd only have to reload nav buttons and signs when going between main sections (not a single page app, but maybe 6 main 'pages' rather than 50ish pages once all the sections and subsections are included. Would welcome any suggestions in how to approach this in a manner that allows me to fully take advantage of GSAP. Thanks.

Yes - thank you. Went through that code along with some videos and written documentation, and that helped things gel quite a bit.

Hi - Trying to learn and explore some possibilities with GSAP. Was playing with SteppedEase and wanted to know if there was a way to alternate movements with this, say move a square 200px right, then 200px down, then 200px right again and so forth. I tried using a for loop with modulo to alternate tweens but wasn't sure how to structure things. Have attached codepen and would appreciate any suggestions.

got it - thank you