fuzzyfluid

Thanks everyone appreciate it.

All right well in regards to #2, i figured out I could use for example path: [{x:0, y:0}, {x:150, y:405}, {x:350, y:225}] as part of the motionPathPlugin so that's awesome. In regards to the example above, is it wrong to assume a path can align to the original position of my element? All the examples I see align the element to the path, not align path to the element? Any advice or is that just not the right usecase or am I thinking about this incorrectly?

Hi there, I've spent a few days researching SVGs, generating Paths, etc. I'm aware of the align property on the motionPath object, however, my asset aligns to the path (Codepen here: https://codepen.io/fuzzyfluid/pen/YzamJpq)., butIs it possible to have the path align to the center of where my element is already positioned rather than aligning my element to the beginning of the path? Question 2: MotionPath from the examples seem great and replaced bezier curve, but are animations such as this still possible with gsap such as this codepen: https://codepen.io/shafi_49/pen/ENWXxL? I'd like to just make a box roll and tumble as if it were kicked across the floor and think a path for that is a bit overkill, but maybe i'm wrong here. T Thanks a ton,

Hi there, thanks a ton for the response but the obvious wasn't it. So I got it fixed and i'll share since someone else might stumble on this since so many people are asking this question. This is for anyone trying to reference gsap.min.js externally, compiling their bundle without gsap. If you compile your bundle with gsap, then it seamlessly works with the instructions. Scripts tag for GSAP and all libs came before my app.bundle.js. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> ....More Scripts... <script type="text/javascript" src="js/app.bundle.js"></script> </body> </html> 2. GSAP ES6 Module Loading (tsconfig.js): { "compilerOptions": { "allowSyntheticDefaultImports": true, "noImplicitAny": true, "module": "ES6", "target": "ES6", "allowJs": true, "sourceMap": false, "outDir": "dev/js/" }, "files": ["src/ts/app.ts", "node_modules/gsap/types/index.d.ts" ] } resulted in me going into my customModule.ts and adding: import gsap from 'gsap'; and not import { gsap } from 'gsap'; since that confined the scope. However, nonetheless, if you use import { gsap} from 'gsap'; With the braces, then what makes it work is: private gsap:GSAP = require('gsap'); .... later down in your class... this.gsap.to(....); this.gsap instead of regular gsap. Again, only if you ended up importing with import {gsap} from 'gsap'; 3. GSAP commonJS Module Loading (tsconfig.js): { "compilerOptions": { "allowSyntheticDefaultImports": true, "noImplicitAny": true, "module": "CommonJS", "target": "es5", "allowJs": true, "sourceMap": false, "outDir": "dev/js/" }, "files": ["src/ts/app.ts", "node_modules/gsap/types/index.d.ts" ] } As mentioned in greensock docs, the above tsconfig allows you to leverage the commonJS/UMD Modules. I have these modules in my node_modules because I installed installed gsap via NPM (npm install --save-dev gsap). If my tsconfig points to commonJS and ES5, then the import changes to the following: 4. Switching between ES6 to commonJS modules: import gsap from 'gsap/dist/gsap'; or import {gsap} from 'gsap/dist/gsap'; same deal with the braces if you're keeping them. Scope Issues. 5. Here's my webpack.config: const path = require('path'); const webpack = require('webpack'); module.exports = { mode: 'development', entry: { index: './src/ts/app.ts' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'js/app.bundle.js' }, plugins: [ new webpack.ProvidePlugin({ gsap: './dist/js/gsap.min.js', }), ], module: { rules: [ { test: /\.(ts|tsx)$/i, loader: "ts-loader", exclude: ["/node_modules/"], }, ], }, resolve: { extensions: [".tsx", ".ts", ".jsx", ".js", "..."], }, externals: { ...other libs are here, gsap: 'gsap' //if this was commonJS, you would replace with: "gsap/dist/gsap": 'gsap' }, }; A reminder: removing the externals would just bundle everything correctly but obviously would be sizable. Another reminder: If you were using commonJS/UMD, then gsap: 'gsap' becomes "gsap/dist/gsap": 'gsap' 6. Package.json for versions: { "name": "", "version": "", "description": "", "main": "dist/index.html", "author": "FUZZ", "scripts": { ................... ...my scripts...... ................... "tsc": "tsc", "dev": "webpack-dev-server" }, "dependencies": { "browser-sync": "^2.27.7", "copyfiles": "^2.4.1", "cssnano": "^5.0.17", "jquery": "^3.6.0", "npm-run-all": "^4.1.5", "onchange": "^7.1.0", "postcss-cli": "^9.1.0", "terser-webpack-plugin": "^5.3.3", "webpack-visualizer-plugin": "^0.1.11" }, "devDependencies": { "@types/jquery": "^3.5.14", "autoprefixer": "^10.4.8", "gsap": "^3.10.4", "html-webpack-plugin": "^5.5.0", "postcss": "^8.4.14", "postcss-loader": "^7.0.1", "sass": "^1.54.2", "sass-loader": "^13.0.2", "ts-loader": "^9.3.1", "typescript": "^4.7.4", "unminified-webpack-plugin": "^3.0.0", "webpack": "^5.74.0", "webpack-bundle-analyzer": "^4.5.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.9.3" } } Super hope this helps, folks. Let me know if you'd like me to pop this up on github or codepen.

Hi, I've been working on this for two days and I figured I'd start off with an opening question with a little bit of background. I have a typescript project where I can compile GSAP as an ES module or a commonJS module and it works fine when it's bundled in my project (compiling, running, animations, etc.) However if I add gsap to the externals in my webpack, I'm getting GSAP undefined in the browser even though I have a script tag bringing in the cdn library. Not having any issues with any other 3rd party so I figured I'd ask even though it seems likely, GSAP as a 3rd party library, wouldn't be bundled with my entire app.