gogo125

Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-transpile-modules npm install --save next-plugin-transpile-modules Then I modified/created my next.config.js file according to their instructions on their NPM page. https://www.npmjs.com/package/next-plugin-transpile-modules Draggable finally worked after that (only if throwProps was set to false and you did not import ThrowPropsPlugin). However, if using a plugin like ThrowPropsPlugin.js it would display an error message like: TypeError: Cannot read property 'defaultView' of undefined Around line 515 of the ThrowPropsPlugin.js file, I changed it: //FROM THIS: _doc = _gsScope.document, //TO THIS LINE I FOUND IN DRAGGABLE: _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, After that, I just did "npm run dev" and the pages rendered on the server side were fully functional as expected. Hopefully this helps somebody out! Guys at GSAP, is there any harm in changing that line in the ThrowPropsPlugin? If not, would it be a good idea to update the plugin and other plugins for others who purchased the membership with GSAP so they don't run into this issue that I encountered?

Hi guys, This subject might be outdated, but there's definitely a lack of resources for working with GSAP and Angular 4+. After Googling and experimenting for days, here is how I finally got Draggable and ThrowPropsPlugin to work properly: 1) Install GSAP into your project by using NPM in a command line interface in your project folder npm install gsap --save 2) Copy over the files from the "bonus-files-for-npm-users" folder from your Greensock download into /node_modules/gsap folder in your project. (you must be a shockingly green or business green member in order to download files the necessary files) 3) Add the appropriate import statements: import 'gsap/ThrowPropsPlugin'; import * as Draggable from "gsap/Draggable"; 4) Then just verify that it's working. Here, we're making any images draggable: ngOnInit() { //make all images draggable as a test Draggable.create('img', { type:"x/y", throwProps:true }); } Hope that helps others looking to incorporate GSAP with Angular or Webpack.