Jump to content

OSUblake last won the day on June 9

OSUblake had the most liked content!

OSUblake

Moderators
  • Content Count

    4,098
  • Joined

  • Last visited

  • Days Won

    423

Everything posted by OSUblake

  1. It doesn't need the CSSPlugin. It's React for PixiJS. I've seen demos of it working fine on CodePen, but I'm on my phone so I'm notg oing to search for them right now.
  2. OSUblake

    ThrowPops import Error

    You should probably mention what you did try, and how you're building site, otherwise we're just shooting in the dark here. I would start by getting rid of that require statement. You shouldn't mix and match import and require statements like that. Also check out the docs. https://greensock.com/docs/NPMUsage
  3. I completely understand your question. The problem has to do with the positioning and z-index of some of your elements. Make a simple demo and I will show you. It's a CSS issue. This question has been asked more than once, like here.
  4. I can understand why you don't want to do batch processing, but your tool works better than other tools out of the box. 😉 I guess another suggestion would be to do improve the comparison between the original and current image. Squoosh does a good job of this. https://squoosh.app
  5. I can't help you without a demo, but this has nothing to do with GSAP. Please read about the stacking context. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  6. When using any type of framework (Angular, React, Vue, etc) you should ALWAYS access elements through reference variables (refs). Using selector text is bound to cause problems. You mentioned you were using React, so you might want to check out this page. https://greensock.com/react
  7. Just add GSAP and Vue to a CodePen, StackBlitz, or CodeSandbox demo, and share the link. I think checking out some of Sarah Drasner's stuff on CSS tricks might help you out. https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/ https://css-tricks.com/intro-to-vue-5-animations/ And maybe this article https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a
  8. There really is no integration as GSAP is a library. You call it when you need it, so it should work with whatever you're using. Check out the learning section and docs. GSAP's API is going to be the same whether you're using Vue or Angular. Don't worry about a "virtual DOM". That term just confuses people. With frameworks like Angular and Vue, you interact with elements through some kind of reference (refs) variable. refs for Vue https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs refs for Angular https://itnext.io/working-with-angular-5-template-reference-variable-e5aa59fb9af Again, GSAP will work with whatever you end up using, and GSAP's API is very easy. The big thing is this. Before you can use GSAP, you need to build something first. I just think it's going to be faster and easier using Vue if you have limited programming experience. Angular is a very large framework that uses TypeScript, which is not an easy language to start out with, and Angular has also been known to cause problems when building. For new people, I just think that Angular's learning curve is going to be much higher than Vue or even React. https://reactjs.org
  9. GSAP works fine with Angular; however, I wouldn't recommend Angular if you don't have a lot of programming experience. Vue is much easier to start with. https://vuejs.org
  10. You can make a scrollbar anywhere, and drag to other HTML elements with a little work. This thread might be worth checking out.
  11. Why are you even using foreignObject? I would not recommended using foreignObject for anything that involves user interaction or animation. It's just not reliable and messes up the current transformation matrix. Nest SVG in HTML, not the other way around.
  12. OSUblake

    Draggable scope: argh!

    Didn't you have a similar issue? Learn to use arrow functions. Very important if you want to keep your code to a minimum. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions You're mixing a bunch of stuff up. I'm assuming the draggableElem is just a single element. setDraggable(){ this.offsetLeft = $('.scrubber').offset().left; this.scrubberWidth = this.screenWidth; TweenLite.set(".progress", {scaleX:0, transformOrigin:"left"}); this.draggableElem = $('.vidcontrols-cursor') this.draggable = new Draggable(this.draggableElem, { type:"x", trigger:".scrubber", bounds:".scrubber", onPress: () => { TweenLite.set(this.draggable.target, {x:this.draggable.pointerX - this.offsetLeft/* offsetLeft: a class' property...*/}); this.draggable.update(); // why are you passing in this? We know what this is. this.updateProgressBarScale(this); }, onDrag: () => { // stuff here }, onDragEnd:() => { // stuff here } }); } df
  13. If the dynamic import doesn't work, I remember testing this out using require statements, but I guess you can't mix and match import and require with webpack 4.
  14. I don't like the idea of copy stuff into the node_modules folder, but it really doesn't matter where you fetch the files from from. It sounds like TypeScript is just be picky. You may need to adjust some settings in your tsconfig file. If you still have problems, just send me a something I can look at. It's way too hard to troubleshoot blind.
  15. Don't declare it if you don't actually use it e.g. if you're only loading CustomEase for the CustomBounce.
  16. import "gsap/CustomEase"; declare var CustomEase; Try it like that. It's the same issue here.
  17. Of course it's a Gatsby issue. Did you see the error you just posted above? See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html That's what happens you load client side scripts on the server. Consider using dynamic imports as it looks like is already configured for that. https://github.com/gatsbyjs/gatsby/issues/11090
  18. There are no definitions, so just declare it. declare var CustomEase;
  19. BTW, another way to clip is with a globalCompositeOperation aka blend modes. I'll save that for another time, but it's more like masking. And no, I don't know if it's actually faster than using clip. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
  20. If you don't understand how save and restore work, here's a little post I made. Without saving and restoring, every time you call your draw function, it will add a new clip path to previous clip path, building it up over time, causing your app to get slower. So if everything is running at 60 fps, your canvas is going to have 60 clip paths after 1 second. Canvas should be faster in theory because there is less overhead. Here's a demo that show how to draw strokes. https://codepen.io/Sahil89/pen/xJWOmB And the trick to scaling stuff is to convert all the values you're going to use as a ratio. So you have a x value at 584. As a ratio that will be 997.3 / 1921 = 0.5191566892243623. Then you can multiply that value by the current width of the canvas element. https://codepen.io/osublake/pen/8af36c03a3718f89cc58d127d9df7f01 The same thing needs to be done for the clip path values, but I didn't have time to break it apart.
  21. Nice! I could have really used this a year ago when I had to make easings based on velocity curves.
  22. Batch processing would be nice. I had to do like 60 images, and it took forever.
  23. Pixi is on the window, TypeScript just doesn't know it. Just declare the plugin. declare var PixiPlugin;
  24. I haven't had chance to use v5 yet, so I don't know what's going on, but I saw this issue on GitHub. https://github.com/greensock/GreenSock-JS/issues/305