Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by gaggo

  1. That looks great! Intuitively, I was looking for an option for that behavior.
  2. Hi there, just a quick question: In the documentation of MotionPathPlugin, it says this: // plot a curve through these coordinates. The target's current coordinates will automatically be added to the start: motionPath: [{x:100, y:50}, {x:200, y:0}, {x:300, y:100}] Is there also an option to NOT add the target's current coordinates to the path?
  3. Hi Carl, thank you, this looks exactly like what I was looking for!
  4. Hi there! Sometime last year, I read a post somewhere here on the gsap docks about generically tweening the position and dimension of an element after moving it in the dom. I can't find it anymore – does someone (maybe Jack himself?) remember the post and maybe has a link?
  5. Thank you @OSUblake! Also thanks for the hint about gsap.registerEase() !
  6. ...just one more question: What exactly is the difference between importing from gsap/all with destructuring vs. importing every single package from gsap, gsap/Plugin1, gsap/Plugin2 , as shown by Jack above? I am using the /all approach in many of my projects, it works fine and is less verbose, e.g.: import { gsap, CustomEase, ScrollToPlugin, Power4, Linear } from 'gsap/all'; gsap.registerPlugin(CustomEase, ScrollToPlugin); gsap.registerEase(Linear, Power4);
  7. @OSUblake you are right. I had to npm uninstall gsap --save before running npm install gsap-bonus.tgz --save again. Now I have all the files available, and it works, yayyy!
  8. I just tried copying the contents of the unpacked "package" folder manually to my node_modules/gsap folder, and voila, now it works. But this is certainly not the intended behavior, right? Maybe some issue with NPM? My npm --version: 7.5.3
  9. Hi there! I managed to get it working on codepen: https://codepen.io/hirasso/pen/QWdaNrw ...but I keep having trouble with the bonus plugin in my project. I downloaded the gsap-shockingly-green.zip from my profile and installed the file "gsap-bonus.tgz" with npm install gsap-bonus.tgz --save – but it doesn't install the bonus files in my node-modules folder. Screenshot #1: the contents of the .tgz file. Screenshot #2: the files in my node_modules "gsap" folder after running the above command. Weird...
  10. Hi there, Since this is a question about a premium plugin, I don't know how to create a test case on codepen. But maybe this is an easy fix anyway? I am trying to make use of Draggable like this: Draggable.create($element, { bounds: $wrap, edgeResistance: 0.5, type: "y,x", inertia: true, }); Here is my gsap import: import { gsap, CustomEase, ScrollToPlugin, Power4, Linear, Draggable } from 'gsap/all'; gsap.registerPlugin(CustomEase, ScrollToPlugin, Draggable); gsap.registerEase(Linear, Power4); ...it works, but is not "throwable", meaning, it stops being dragged immediately when I release my mouse. Also snaps back into the bounds instantly on release. I thought I could control this behavior with inertia being set to true? I don't get any warning in my browser console.
  11. From MDN: Since in my ./js/app/index file I have the main class and also call it from there, I thought this would be exactly what I wanted...
  12. For future reference: I posted an issue over at the parcel bundler github page: https://github.com/parcel-bundler/parcel/issues/4956
  13. Hi Jack, Thanks so much for your quick feedback! The issue was caused by my setup. I had a main index.js file, that's only purpose was to imported the main app.js, some scss and had a bit of bundler-specific code: // app code import './js/app/index'; // app scss import './scss/app.scss'; // some bundler-specific stuff if( module.hot ) { module.hot.accept(() => { window.location.reload(); }) } With the above setup, I kept getting the mentioned error when scopeHosting was enabled. I've spent an hour to get to the bottom of this, and it turns out it was due to the Side Effects Only import of the ./js/app/index file 🤯. So fixing it was as simple as that: // Named import of app.js to support scopeHoisting import App from './js/app/index'; // app scss import './scss/app.scss'; // bundler related stuff if( module.hot ) { module.hot.accept(() => { window.location.reload(); }) } The weird thing is, that it worked just fine with all my other node_modules. I will post at the parcel issue tracker, maybe we can find out more about it there.
  14. Hi there! I'm not sure if it's a problem with my bundler (parcel) or with gsap – I can't get parcel's scopeHoisting ( = tree shaking ) to work with gsap. It works just fine with all other libraries I use. This is what I do in my script: // GSAP in with bundler, as seen here: https://www.youtube.com/watch?v=znVi89_gazE import { gsap, CustomEase, ScrollToPlugin, Power4, Linear } from 'gsap/all'; gsap.registerPlugin(CustomEase, ScrollToPlugin); gsap.registerEase(Linear, Power4); If I bundle this without tree shaking, I get no errors. But as soon as I enable it, I get this error in my console: ../node_modules/gsap/all.js does not export 'gsap' I am using the latest club gsap, with npm and gsap-bonus.tgz Any ideas?
  15. OK, just renewed my membership, I had an outdated copy of "gsap-bonus.tgz". All good now!
  16. Hi there! I have been happily using Draggable in combination with ThrowPropsPlugin for a while, and wanted to migrate my code to the new GSAP V.3 now. I found out that the ThrowPropsPlugin has been succeeded by the InertiaPlugin – but it seems like it's not part of my premium download package (yet)? Can someone point me to a complete migration instruction? I'm using the archive "gsap-bonus.tgz" with NPM. Basically, I want to use it like seen here, but with npm and proper imports from 'gsap': https://codepen.io/GreenSock/pen/zDwEk Thanks a lot!
  17. Wow Zach, things can be so simple!! This is what totally solved it for me: tweenMousePosition(newPos) { gsap.to(this.mousePos, 0.8, { x: newPos.x, y: newPos.y, onUpdate: () => this.adjustMask(), ease: "power4.out", overwrite: "auto" }); } Thanks so much for your help!!
  18. Ah, I see... in the quickSetter mouse follow example, I can see the good old dummy ease I always used back in the days: pos.x += (mouse.x - pos.x) * speed; pos.y += (mouse.y - pos.y) * speed; So no more support for GSAP's great easing functionality? I especially love `CustomEase` ...
  19. Hi Zach, thanks for your swift answer! I made a pen with gsap 2.x: https://codepen.io/hirasso/pen/yLeaYwR Basically I want the position of my mouse (or devicemotion on mobile) not to be applied immediately, but rather with gsap's great easing capabilities. I'd like to migrate this to GSAP V.3
  20. Hi there, I used to use TweenMax.updateTo() like described here: https://greensock.com/docs/v2/TweenMax/updateTo() How would I solve this using the new gsap Version 3? I'm using npm with the bonus packages.
  21. Hi @GreenSock, sorry for the late response – was on holidays for the week. I don't know of any risks of adding it to the package.json. I think it would make it much more intuitive to many of us, if it would 'just work', without using the /umd/ files.
  22. OK, I found the solution: Browserify expects commonJS modules Babelify runs before the final Browserify process and converts all es6 modules to commonJS – files inside node_modules are ignored by default GSAP V2 uses es6 modules and resides inside node_modules, which caused the errors Adding this to the package.json of the npm GSAP solves this: "browserify": { "transform": ["babelify"] } Could you please put this inside by default? Could save a lot of people some trouble.
  23. So, I found the cause of this: https://github.com/babel/babelify#why-arent-files-in-node_modules-being-transformed Are you guys planning to pre-compile gsap for babelify/browserify, soon?
  24. ...This also creates problems when I use premium plugins like the ThrowPropsPlugin. I have to re-write this line: import { TweenLite, _gsScope, TweenPlugin, Ease } from "gsap/TweenLite.js"; to import { TweenLite, _gsScope, TweenPlugin, Ease } from "../gsap/TweenLite.js"; ...making it also reference the relative folder outside the default node_modules location.