gogo125
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by gogo125
-
-
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 --save2) 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.
- 2
React, Next.js and GSAP issues - possible fixes for SSR
in GSAP
Posted
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:
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:
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?