Jump to content
GreenSock

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

gaggo

Members
  • Posts

    42
  • Joined

  • Last visited

Posts posted by gaggo

  1. ...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);

     

  2. @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! :) 

    • Like 1
  3. 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 --version7.5.3

  4. Hi there! I managed to get it working on codepen:

     

    See the Pen QWdaNrw by hirasso (@hirasso) on CodePen

     

    ...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...

    Screen Shot 2021-04-09 at 20.05.32.jpg

    Screen Shot 2021-04-09 at 20.06.12.jpg

  5. 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.

  6. 8 hours ago, OSUblake said:

    I wouldn't expect importing as a side effect to work once you do a production build... but maybe parcel does something different. 🤷‍♂️ 

     

    What's it do... add the imports to the window or something?

     

    From MDN:

    Quote

    Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.

    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...

  7. 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.

    • Like 1
    • Thanks 1
  8. 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?

  9. 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':

     

     

    Thanks a lot!

    See the Pen zDwEk by GreenSock (@GreenSock) on CodePen

  10. 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!!

  11. 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` ...

  12. 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. 
     

  13. ...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.

×