Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by gaggo

  1. 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.
  2. 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.
  3. 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?
  4. ...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.
  5. Hi there, I'm having problems once again with babelify and gsap. When importing any file from gsap: import TweenLite from 'gsap/TweenLite'; ...I keep getting this error in the console: SyntaxError: 'import' and 'export' may only appear at the top level (22:0) while parsing [...]/node_modules/gsap/TweenLite.js [...] is my local path. The file exists. It works just fine, if I copy the full gsap folder in my project and reference it relatively: import TweenLite from '../gsap/TweenLite'; This is not related to the many issues in the internet, that are being solved by installing `babel-preset-es2015`. (One example: https://github.com/babel/babelify/issues/157#issuecomment-188146766)
  6. Hi Craig, ok thank you, I think in this case I will have to write a callback function for the snap property and determine which element is closest to the value. Thanks again for your hints!
  7. Hi there, just got a club license to use the amazing ThrowPropsPlugin in combination with `draggable` and `type`:`scroll`. Now I would very much like an option to make the scrolling snap to certain elements, if flicked. Is there an option or approach for this?
  8. Thanks guys, your work is greatly appreciated! I sometimes work without a decent internet connection, that's why I tend to import everything locally. But you are right, using a CDN for the production site totally makes sense. Again, thank you!!
  9. Yes, I saw your post over at GitHub. Thanks so much for trying to work it out!
  10. Hi Jack, so this is the reply that I got from the guys over at browserify: https://github.com/substack/node-browserify/issues/1686#issuecomment-279503986 They claim it's gsap, you say it's browserify... I would be happy to help, but sadly I am not firm enough for that kind of thing.
  11. So – I somehow "fixed" the problem. I replaced this line in both files: import TweenLite from 'gsap'; with import 'gsap/TweenMax'; Any idea why?
  12. If you are interested, you can test it yourself. I am really puzzled about this. browserify assets/js/script1.js -o dist/js/script1.js -t babelify browserify assets/js/script2.js -o dist/js/script2.js -t babelify ...and here are the two source files: https://rassohilber.com/debug/tweenlite/assets/js/script1.js https://rassohilber.com/debug/tweenlite/assets/js/script2.js When I switch out the order of the two scripts are embedded in my html page, the last included always doesn't work. `TweenLite` is only an empty object in the second included file.
  13. OK, thanks again for your feedback. I will report back as soon as I have found out about what happens there.
  14. Thanks for your response! I just set up another test, using Flickity twice from two different files: https://rassohilber.com/debug/flickity/ This works without any problems. Maybe this helps finding the solution?
  15. Hi there, I set up a test case on my server: https://rassohilber.com/debug/tweenlite/ There are two scripts included on the page, both importing TweenLite from the same npm gsap package. The first animates the .el-1, the second should animate .el-2. If you open the console, you see what I mean (the second script errors). Sorry for saying, TweenLite pollutes the global namespace. I didn't really know what I was talking about there EDIT: I should maybe add that I am using watchify with babelify transform. EDIT #2: ...but the babelify transform doesn't make a difference, just tested it without it.
  16. Hi there, I have two javascript-files in my included in my html page, each calling this in it's beginning: import TweenLite from 'gsap'; Later, when I try to call the TweenLite.to function, I get this error in the second file that I include in my html: Uncaught TypeError: Cannot read property 'to' of undefined at bodyScroll (app.js:692) at HTMLAnchorElement.<anonymous> (app.js:640) at HTMLDocument.dispatch (jquery.js:5201) at HTMLDocument.elemData.handle (jquery.js:5009) Any ideas? EDIT: It seems like TweenLite pollutes the global namespace. Shouldn't this never be the case with browserify?
  17. Hmm, so just now, I recieved my first digest, without changing anything Anyways, thank you!
  18. Hi Carl, thanks so much for your explanations! About the notifications: I checked all my spam-folders and couldn't find any mails from greensock.com. Also, my Notifications indicator on my profile page showed "NOTIFICATIONS (0)", although you had answered, If I remember correctly. I had to go over "Topics" and then go to this post to find out you had answered me. Maybe it's me, maybe a bug... You never really know P.s.: Another Bug I have when posting here: The whole screen fills with the following message: "Warning: Illegal string offset 'post' in /home/greensoc/public_html/forums/hooks/StopSpamAjax_435022f28bbe04c34c3a760af68881c7.php on line 53 Warning: Illegal string offset 'post' in /home/greensoc/public_html/forums/hooks/StopSpamAjax_435022f28bbe04c34c3a760af68881c7.php on line 53 Warning: Illegal string offset 'post' in "
  19. Hmm ok, I see... Can you tell me the order in which the transforms are applied? I would need to rotate first and translateX/translateY later. P.s.: Thanks for the tip with the transform order, didn't know that! P.P.s: Is there a way to get email notifications for posts I am following here in the forum?
  20. Oh my, I didn't realise that you answered, thank you! I tried your suggestion, but something is odd with the positioning. Somewhere else in the forums I found this workaround, which does the job for me: function applyProps() { $(".slides").css({ transform: "rotate("+slidesTransformProps.rotation+"deg) translateX(" + slidesTransformProps.translateX + "px) translateY(" + slidesTransformProps.translateY + "px)" }); } slidesAnimation = new TweenLite.to(slidesTransformProps, transitionSpeed, { directionalRotation: { rotation: slideAngle + "_short", }, scale: scaleDiff, translateX: left, translateY: top, ease: Power2.easeInOut, onUpdate: applyProps }); Still, it would be great to know what the "GSAP" way of doing this would be.
  21. Hi there, first of all, wow!! GSAP is very impressive. I have the following code to animate the transform of an element: TweenLite.to(".element", transitionSpeed, { ease: Power2.easeInOut, css:{ transform: "scale("+scaleDiff+") rotate("+angle+"deg) translateX("+left+"px) translateY("+top+"px)" }}); Everything works as expected, except that the rotation is in the wrong direction. Can you give me a hint on how to change the direction of the rotation without loosing the transform property?