OSUblake last won the day on August 13

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,664
  • Joined

  • Last visited

  • Days Won

    358

Everything posted by OSUblake

  1. OSUblake

    import { ... } from 'gsap' vs from 'gsap/all'

    import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap/all'; // vs import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap'; Here's the result of that. "gsap" is the brown/tan bundle, and "gsap/all" is the blue bundle. Not only is "gsap/all" smaller in size, but everything it imports will be hoisted, making it load it faster. Notice how "node_modules" only appears once for "gsap/all". It appears several times for "gsap". You can import like this if you want to, just don't expect the file size to be different. It doesn't matter what you do, the output will always be TweenMax with all it's plugins. // Exports everything in TweenMax import "gsap"; // Exports everything in TweenMax import TweenMax from "gsap"; // Exports everything in TweenMax import { TweenMax } from "gsap"; // Exports everything in TweenMax import TweenMax from "gsap/TweenMax"; // Exports everything in TweenMax import { TweenMax } from "gsap/TweenMax"; // Exports everything in TweenMax import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap'; // Exports everything in TweenMax import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap/TweenMax'; Let's just say that those methods are deprecated. This is now the recommended way to import a la carte. import { TweenMax, TimelineMax, AttrPlugin, CSSPlugin } from "gsap/all"; // Ensure modules don't get dropped by tree-shaking const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin ];
  2. OSUblake

    Webpack bundling Issue

    Hi @GordonFreeman I tried to get your attention in another thread, but maybe you didn't get the notification. Script tags do that for a reason, but why are you even messing with a script tag and eval? That's a huge red flag. You should be using the output of webpack just like a normal JavaScript file. <script src="dist/bundle.js"></script>
  3. OSUblake

    ScrambleText/MorphSVG Plugins with Angular6 and Firebase

    @djohnson we can't test firebase serve as you have to be logged in for that. I just tried the latest version of GSAP (2.0.1) with Angular 6, and it worked fine... that is until I created a production build. I'm pretty sure that's a problem with the Angular CLI. It's doing weird stuff, like not even executing some code. If you search around, you'll find that there are a lot of issues with the latest version of the Angular CLI. If all else fails, just add your scripts to angular.json file. https://github.com/angular/angular-cli/wiki/stories-global-scripts If Angular is running is slow, it's probably because of how change detection is triggered inside a zone. When an animation is playing, Angular will call ngAfterViewChecked on your components, even if you haven't implemented that method. It does that on every animation frame, which might be happening 60 times/second. That's a lot of extra work! To prevent Angular from doing that, you need to add this line of code in polyfills.ts, right before the zone.js import. // Allow animation frames to run outside zone to improve performance __Zone_disable_requestAnimationFrame = true; /*************************************************************************************************** * Zone JS is required by Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI.
  4. OSUblake

    import { ... } from 'gsap' vs from 'gsap/all'

    @Friebel I read your post, but I don't know what you're doing. Check out this example repo. It will generate a visual comparison of the two bundles. https://github.com/OSUblake/gsap-treeshaking npm install npm run build Using "gsap" Parsed size: 118.73 KB Gzipped size: 38.19 KB Using "gsap/all" Parsed size: 55.46 KB Gzipped size: 16.63 KB It could be even smaller, but the unused eases aren't being dropped. Maybe in the next version. @Gordon Freeman you may want to have a look at that repo too. To install bonus plugins like the MorphSVGPlugin, look at the folder you download from your account. The latest version finally has a package.json file, but it's still not ideal. Copy the files in the bonus-files-for-npm-users folder to the esm folder, and then uncomment this in the all.js file. /* import DrawSVGPlugin from "./DrawSVGPlugin.js"; import MorphSVGPlugin from "./MorphSVGPlugin.js"; import Physics2DPlugin from "./Physics2DPlugin.js"; import PhysicsPropsPlugin from "./PhysicsPropsPlugin.js"; import ScrambleTextPlugin from "./ScrambleTextPlugin.js"; import ThrowPropsPlugin from "./ThrowPropsPlugin.js"; import GSDevTools from "./GSDevTools.js"; import SplitText from "./SplitText.js"; import CustomBounce from "./CustomBounce.js"; import CustomEase from "./CustomEase.js"; import CustomWiggle from "./CustomWiggle.js"; export { DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, PhysicsPropsPlugin, ScrambleTextPlugin, ThrowPropsPlugin, GSDevTools, SplitText, CustomBounce, CustomEase, CustomWiggle } */ Now install that esm folder in your project. DO NOT INSTALL GSAP FROM NPM!!! How to install from a folder or other location https://docs.npmjs.com/cli/install Or you can create a symlink, and keep reusing the same folder for other projects. https://docs.npmjs.com/cli/link Now import from there, and you should be good. import { TweenMax, TimelineMax, AttrPlugin, CSSPlugin, MorphSVGPlugin } from "gsap/all"; // Ensure modules don't get dropped by tree-shaking const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin, MorphSVGPlugin ];
  5. OSUblake

    Best way to use GSAP with Webpack

    @Friebel what problems were you having? Can you make a simple repo of what you are doing? There really should be no reason to do that. Letting Babel handle the module transformation can cause problems. I would set Babel's es2015 modules to false and let webpack handle it. https://stackoverflow.com/a/41790154/2760155
  6. OSUblake

    import { ... } from 'gsap' vs from 'gsap/all'

    @Friebel you're obviously not doing tree shaking. gsap/all exports everything, so it will be bigger during development. // This will be the same size as all previous versions of gsap import { TweenMax } from "gsap/TweenMax"; // Same thing here. No difference from previous versions of gsap import "gsap"; // TweenMax has no dependencies here besides TweenLite, so a huge difference import { TweenMax } from "gsap/all";
  7. OSUblake

    paid,jobs,Classifieds,hire ???

    Yeah, I think it would be a good idea. It's something I've actually thought about before, I just never brought it up.
  8. OSUblake

    paid,jobs,Classifieds,hire ???

    That could be because people don't want to post a job on a support forum. It will also move off of the first page in a couple days, so very few people will actually see it.
  9. OSUblake

    Progressing draggable to smoothly drag along the path

    I'm sorry, but the deadline was Tuesday, so you'll have to settle for a reaction trophy. But nice work!
  10. OSUblake

    Draggable doesn't clean up inline style

    OK, I see your point. I would also have to agree that Draggable should clean up userSelect on kill. It removes other stuff it adds like the cursor.
  11. OSUblake

    Displacement Map, Busy to Still...Anybody?

    Yes, image width and height are good examples of attributes that can animated using the AttrPlugin. Attributes aren't too common on HTML elements, but for SVG, it's a completely different story. For example, this is what a circle looks like in SVG. cx is centerX, cy is centerY, and r is radius. <circle id="myCircle" class="circle" cx="50" cy="50" r="25"></circle> And to animate those attributes.. TweenLite.to("#myCircle", 1, { attr: { cx: 100, cy: 100, r: 50 } }); id and class are attributes too, but you normally wouldn't animate those for obvious reasons.
  12. Here's a somewhat related demo. Using a little brute force to prevent any overlapping. You could do the same thing. And no, you don't have to move an element to figure out if it's going to overlap. Rectangles are a very useful model. Just update your model until it isn't overlapping. var bounds = element.getBoundingClientRect(); var rect = { x: bounds.left, y: bounds.top, width: bounds.width, height: bounds.height };
  13. There's a lot of HTML5 game engines like Phaser, Construct, PlayCanvas and Cocos, but I don't know how useful they would be for building a user interface. Like a lot of physics libraries, SAT.js does not do anything visually. It just calculates stuff for you. You have to wire it up to whatever you're using. Using Draggable + SAT.js like you described. It will move the draggable off of whatever item it does a collision check against, but there's a problem, just like I described in my previous post. When your draggable is moved off an item, it might be pushed onto another item. That item might have already been checked for collisions, or it might push your draggable back to the item it was just moved from. You can run through the collision detection process multiple times and hope that it will settle in a place where it doesn't overlap, but there are no guarantees without adding more logic to the process.
  14. Simple collision detection is using Draggable's hit test. What you're asking is much, MUCH more complicated than that. You would need to use something like the Separating Axis Theorem (SAT), and find the Minimum Translation Vector (MTV). The MTV is the shortest distance that the colliding object can be moved in order to no longer be colliding. And collision detection should be done while you're dragging. Trying to check for collisions on drag end will only make it more complicated. What happens if you drop a box in the middle of 4 other boxes, so that each edge is overlapping a different box? There might be not be a solution as the different boxes can keep pushing your draggable back and forth between each other, resulting in an infinite loop. You can read up on SAT in the links here. You will need Flash to view some of the demos in those links. https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#Separating_Axis_Theorem SAT.js might be a good library to look at. If there's a collision, the response object will give you the MTV. https://github.com/jriecken/sat-js
  15. OSUblake

    Best way to use GSAP with Webpack

    @La Colonia @einomi @Friebel It's not an Uglify issue. It's the create-react-app being really strict. There is a line of ES6 code in TweenLite that is causing the build to bailout, and we'll get that fixed. Note that GSAP is now at version 2.0.0. There's also some new documentation about using npm. https://greensock.com/docs/NPMUsage To get the smallest build possible, I would follow this format for now. Import what you need from "gsap/all", and then put everything you import inside an array so it doesn't get dropped by tree shaking. import { TweenMax, TimelineMax, AttrPlugin, CSSPlugin, Bounce } from "gsap/all"; const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin, Bounce ]; That will create a bundle that should look like this. Notice how it imports the TweenMaxBase module, which doesn't include any include plugins. @GreenSock this line of code needs to be changed again. And _gsScope should be defined just as window. Leaving _gsScope the way it is now will cause TweenLite to be excluded from the gsap bundle. It will still work, but it won't be optimized for production. export const {Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin} = _gsScope;
  16. OSUblake

    Displacement Map, Busy to Still...Anybody?

    Hi @soupking I have a lot of posts about displacement mapping, mostly about PixiJS, but it works exactly the same in SVG. However, there is a bug in Chrome that prevents you from using an image for the map, so my demo here is broke. 😪 SVG documentation is really bad, but MDN does have a little info on <feDisplacementMap>. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap Look at the scale attribute. That controls how much displacement takes place.
  17. OSUblake

    Best way to use GSAP with Webpack

    Yarn is down at the moment, so I can't see what's going on. Maybe another day. What does it use to minify? There is no ES6 code besides the imports/exports, and some 'const' declarations used to store them. Could it be choking on that?
  18. OSUblake

    Draggable doesn't clean up inline style

    If I'm killing a draggable instance, that usually means I'm also removing the element, so this has never been a problem for me. The only thing I expect is that any references will be cleared so the object can be removed memory. That's not to say you're wrong, but I honestly can't think of a single plugin that returns something back to it's previous state when you kill it.
  19. OSUblake

    Best way to use GSAP with Webpack

    @einomi Do you have a test case? There is absolutely no ES6 code in the ES modules, just like it says here. https://github.com/rollup/rollup/wiki/pkg.module And have you tried the UMD versions?
  20. OSUblake

    Displacement Map, Busy to Still...Anybody?

    Here's one by @Jonathan
  21. OSUblake

    Progressing draggable to smoothly drag along the path

    Did you notice how the line turns green when you are close to the path in my boxes demo. That's kind of what you're asking, but it will still allow you to jump around. Really simple demo showing the problem.
  22. OSUblake

    TweenMax.set blur with decimal values

    CSSPlugin rounds values. TweenMax.to("#logo-home", 4, { filter: "blur(6px)", autoRound: false });
  23. OSUblake

    Latest Firefox for Windows breaks rendering.

    I used to have problems like that. Updating my graphics driver fixed the problem.
  24. OSUblake

    Progressing draggable to smoothly drag along the path

    If you look at those boxes, they go in order, and adjacent boxes will not overlap. So you can use that prevent unwanted movement. For example, if the user starts out dragging in the first box, we'll call that box #0, then you can limit dragging to that box and box #1 i.e. the next box on the curve. Once the user has dragged into box #1, then you would limit movement to box #0, #1, and #2. Once the user has dragged into box #2, then you would limit movement to box #1, #2, and #3. You would just continue that pattern until the end. Normally I would make a demo, but I don't have a lot of time right now. If @Dipscom or @Sahil wants a challenge, feel free to help out.
  25. OSUblake

    Progressing draggable to smoothly drag along the path

    Yeah, that's one problem with finding the closest point on a path. Think about a circle. There would be an infinite number of closest points if your mouse was in the center. I commented out the distance property in the object returned by that function because I wasn't using it, but you could use that to run some logic to make sure it doesn't jump around. Breaking your curve down into smaller chunks might make that easier. Somewhat related demo where I create bounding boxes around smaller parts of a curve. You can see that progression could follow the order of the boxes.