OSUblake last won the day on January 20

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,175
  • Joined

  • Last visited

  • Days Won

    318

Everything posted by OSUblake

  1. setting perspective ignores z-Index

    They still have a tool for Shaders... and even one for canvas, which I found to be really interesting. It's like a slide show, showing how every single thing is drawn on the canvas, one step at a time. And I just found what I remember playing with, but it's no longer available. https://developer.mozilla.org/en-US/docs/Tools/3D_View
  2. setting perspective ignores z-Index

    I remember playing with one in Firefox a couple of years ago, but I can't find it anymore. Not sure if they removed it, or I just can't find it. And I hear ya on Firefox. I really love the way it's looking these days, but it's performance is really bad on my graphics card for some reason. Not sure what the issue is, but it's an artifact factory. If and when that gets resolved, I would like to start using it more.
  3. setting perspective ignores z-Index

    In case you didn't see my post, I added a little tip about being able to view stacking contexts with Chrome's dev tools. I just noticed it a couple of weeks ago, so I don't think it's visible by default. If you don't see a tab for it, you might have to click on the more options icon in the right corner > More tools > Layers.
  4. Tween to svg object

    Here you go.
  5. Tween to svg object

    Hi @huwllewellyn You wouldn't be banging on your head on the wall had you looked at the pinned SVG Gotchas! thread. Everything you need to know about getBBox is right here, including a helper function that does exactly what you want. Give me a minute, and I'll show you how to use it in your demo.
  6. IDE for using GreenSock?

    Hi @RedUndies GSAP doesn't have a developer environment, but you can use it inside pretty much any environment that can run JavaScript, like Adobe Animate. I use several different products from Microsoft and JetBrains. The one I use the most is Visual Studio IDE, but I can't recommend that for most people as it can take some time to learn. What I can highly recommend is Visual Studio Code (VS Code). It's smart, lightweight, and much easier to get started with. And I have no way to verify this, but it seems to be the most popular code editor among front-end/web developers. It also has a ton of really useful extensions, which you can check out here. https://marketplace.visualstudio.com/vscode WebStorm / PhpStorm is another great IDE, but it's not free. And to tie everything together, I would recommend installing some type of live-reloading development server, like BrowserSync. This will allow you to load up your project on multiple devices, and it will automatically refresh/reload the page whenever you make changes to a file, just like on CodePen.
  7. fullpage and gsap animation

    Hi @ArmYourselves Check out this thread.
  8. how show tweenmax.js from local if cdn fail?

    Fetch is good, but it's asynchronous. The document.write method is solid as it will continue to load your scripts and other stuff in your html in the correct order. You could also do that to fallback to another CDN. Have you tried jsDelivr? I think it's much better than cdnjs. https://www.jsdelivr.com
  9. Here's how to make a really simple camera. Just move the world in the opposite direction your target is moving. To keep the target centered in the view, the path should be at least 1/2 a screen away from the edge of the world. I didn't do that in this demo, and you'll notice when the bee gets close to the edge of world because it has to move away from the center of the screen.
  10. setting perspective ignores z-Index

    Try setting the z-index to 9999. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
  11. GSAP + Canvas Particle animations

    That is so true. I've noticed that a lot of people think GSAP is only for HTML and SVG, even from long time users. That needs to change. Somewhere on my todo list is to make some tutorials showing how to use GSAP + canvas. It's hard enough trying to find a decent canvas tutorial, let alone one that uses GSAP. To get a regular polygon to start at 12 o'clock, you just need to swap the sin and cos calls, and negate the y value. // To start at 3 o'clock var x = centerX + radius * Math.cos(angle); var y = centerY + radius * Math.sin(angle); // To start at 12 o'clock var x = centerX + radius * Math.sin(angle); var y = centerY - radius * Math.cos(angle); And to draw your particles, canvas has a new feature called Path2D that will allow you to create and combine reusable paths, so you could use the same path for all your particles. Here's a quick fork of your last demo using Path2D with the corrected angles. The formula used for a regular polygon is based on a circle, so it seems that the center of a polygon should be the same as the circle that circumscribes it, but look at what happens when the polygons has an odd number of sides. It's not symmetrical going up and down, so the top is further away from the center than the bottom. That means the center needs to be moved down a little if you want to have it perfectly centered inside a container. So we need to calculate the bounds of the polygon, find the difference between the height of the circle and the polygon, and then offset it half of the difference. And to make the shape and your animations responsive, it will be easier if we calculate the points of a polygon with a radius of 1, and then scale those points based on some desired scale/radius. That's basically how an SVG works. Check out how everything is nicely centered and responsive in this demo. I'll incorporate that in another version of your demo, which I'll have to do later as I gotta run.
  12. GSAP + Canvas Particle animations

    Hey @Bartonsweb Nice job on expanding what I did. The thing that trips most people up on canvas is that they are expecting it to work like the DOM, but canvas is just a graphics API, providing with you a bunch of different drawing commands. So to animate canvas, all you need to do is create an object with properties that describe how you want to draw something. Once you have an object, animating it with GSAP works exactly like the DOM. However, there's an extra step involved as you have to render that object. That's what GSAP's ticker can be used for. If everything is going smoothly, it should call the callback at around 60fps. Here's a good article and video that explains the pros and cons of the DOM and canvas. https://www.kirupa.com/html5/dom_vs_canvas.htm That Kirupa site has a lot of good tutorials on canvas. https://www.kirupa.com/canvas/index.htm And so does MDN, although some of the stuff is outdated. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial And I'll make another version showing how to do the particles flying in later. Is a pentagon the only shape you're going to be using? I'll also show you how to make polygons that start at 12 o'clock instead of 3 o'clock. That's why the bottom of your polygons aren't completely horizontal.
  13. Business Green plugins with Angular / NPM

    Same thing for @AceBoy and @LucitheR You can send me a PM with it.
  14. Business Green plugins with Angular / NPM

    Just send me your project, and I can take a look at it later.
  15. Business Green plugins with Angular / NPM

    That's a good point! I've seen some CLI tools create a 'vendor' folder before.
  16. Business Green plugins with Angular / NPM

    It's trying to write a file at that location for whatever reason. allowJs is if you are using TypeScript to compile to a single file. And there's probably multiple tsconfig files in your project. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html https://www.typescriptlang.org/docs/handbook/compiler-options.html If you're using a CLI tool, which I guess Ionic uses, then the build process is probably going to be different, so you probably don't want to do that. It's really hard to answer questions like this without seeing your project.
  17. Business Green plugins with Angular / NPM

    Thanks! Forgot to mention that.
  18. Business Green plugins with Angular / NPM

    You can install from a folder or your own repo. And if you're using TypeScript, you should probably import plugins/utils using this syntax. import * as CustomWiggle from 'gsap/CustomWiggle';
  19. Tweening in click

    Hi @Anya You need to save a reference to a timeline if you want to check if it's active.
  20. Drag along an svg path

    Actually, this might be easier. I just modified the closestPoint function from this d3 demo. https://bl.ocks.org/mbostock/8027637
  21. GSAP + Canvas Particle animations

    Most questions usually get a response within a couple of hours. Maybe longer on the weekends. What you're trying to do makes more sense after looking at that site. And it looks like they are also using GSAP to animate those particles. That's a pretty advanced animation, but the basic idea is that you animate a particle along a path, and rotate the particle around its position on the path while scaling it. Easier said than done if you've never worked with canvas before. The hardest thing to understand is probably transforms, which that animation uses extensively. Here's a very quick and dirty demo showing how that animation could work. And be sure to check out that thread I posted above for some tips on getting started with canvas and GSAP.
  22. animating circle shape

    Wow! I never heard of Vertigo, but just watched the intro. That's pretty impressive considering it's age. And the use of a gun firing computer is really interesting. I did artillery in the US army for a couple of years, which involved using a more advanced version of that. In addition to figuring out the direction/movement of a gun, the computers dealt with another animation concept, parallax movement. It's used to figure out how far away something is. https://en.wikipedia.org/wiki/Parallax#Artillery_gunfire
  23. animating circle shape

    The one with the sine eases can result in some interesting movement by using different durations. You end up with a with something like a Lissajous curve.
  24. GSAP + Canvas Particle animations

    Hi @Bartonsweb I'm not sure I understand what that is supposed to look like. Do you have a mockup? Canvas isn't the easiest thing to start with, especially if you're going to be dealing with nested rotations, but this thread has some good info.
  25. Path comparison with MorphSVGPlugin?

    That's really neat! I haven't seen that experiment.