OSUblake last won the day on January 22

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. 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.
  2. 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.
  3. Path comparison with MorphSVGPlugin?

    That's really neat! I haven't seen that experiment.
  4. animating circle shape

    Another easy solution is to nest your element inside another element. This will allow you to easily animate the radius, i.e. the size of the circle. I added a background color to make it easier to see. For a delay with the bezier, that requires a little work. We need to move it into its starting position and rotation, so you could do something like this.
  5. animating circle shape

    Hi @felek You could mess with the transform origin. That's much easier to do with SVG. Here's one way to do circular motion using 2 animations with a sine ease. And here's a function that will calculate an ellipse based bezier for you.
  6. Drag along an svg path

    A complicated shape where you can drag along the x and y axis would probably require finding the closest point on a curve. http://phrogz.net/svg/closest-point-on-bezier.html That's based on this SO answer. https://stackoverflow.com/a/44993719/2760155 Definitely not an easy task. For dragging along a single axis, this thread might be of help.
  7. Draggable & Resizable

    This thread has several examples that might be worth checking out. I think there was another thread similar to it, but I can't find it at the moment.
  8. startDrag bug in chrome touch events

    I can reproduce the problem, but it's not a Draggable issue. Always use PointerEvents when available. IE and Edge do not not have touch events, and never will. And you need to add touch-action to your CSS. This article does a really good job of showing how to work with touch. https://developers.google.com/web/fundamentals/design-and-ux/input/touch/ With PointerEvents and touch-action on the trigger...
  9. Scaling parent and child element

    Yep, you could do that. There's a bunch of ways to handle this, and I was only showing 1 way. It's best to test different ways, and find what works best for what you're doing.
  10. Path comparison with MorphSVGPlugin?

    Hi @radiohead To calculate the difference between two shapes, Clipper might work better than comparing pixel data. Well, it should at least be faster, and work in IE. https://sourceforge.net/projects/jsclipper/ http://jsclipper.sourceforge.net/ If you want to take that to the next level, gesture recognition might be another possibility. $1 recognition is probably the most basic/common. http://depts.washington.edu/madlab/proj/dollar/index.html Then you have machine learning, like with Google's Quick Draw game. I think that is using Paper.js, which can also do boolean operations like Clipper. https://quickdraw.withgoogle.com/ https://github.com/googlecreativelab/quickdraw-dataset
  11. Solitaire web game now running GSAP!

    Really nice! I was wondering how you were making out with the new version, but it looks like there are no card physics. Was that too much trouble to implement?
  12. Draggable div incredibly slow to react when using iOS

    You and @Jonathan pretty much covered what I was going to post. Basically that SVG is downright crazy!!! I've never seen such a complicated SVG before. Graphically it doesn't look complicated, but it took Illustrator and Inkscape around 10 minutes to load it. What's weird is that you can draw it immediately to a canvas element without any problems or delays. 630kb is the file size. The size in memory will be MUCH higher than that. If your image is 3000 x 2500, and each pixel is 3 bytes... 3000 * 2500 * 3 => 22,500,000 => 22.5MB On a HiDPI display like a phone, your SVG would be even higher than that. If the device pixel ratio is 3, then the browser would be drawing your SVG at 9000 * 7500. 9000 * 7500 * 3 => 202,500,000 => 202.5MB!!! And now your phone is out of vram! You'll probably need to break your image up into smaller images, and only display what is visible with a little buffer around the edges. Pretty much the same thing that tile-based games do. https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps
  13. convergence / divergence of svg elements

    @PointC link about animating an explosion from the center made me remember showing how to do something similar. You can create some pretty interesting effects with very little code.
  14. convergence / divergence of svg elements

    I used to animate position based attributes, like x/y on rects and cx/cy on circles, but then I started noticing problems if you also animate other transforms on the same element. I haven't brought the issue up with @GreenSock before, but I'm guessing it's causing problems with the way GSAP calculates origins. It all depends on the order and when they are applied, but changing a position/size based attribute causes the bounding box to change, which GSAP might not be aware of. So it might be better to use getBBox, and animating transform based x/y just to be safe. Another reason is that there can be a performance advantage in certain browsers when animating a transform over an attribute. For what you're doing, you don't need to set an origin. svgOrigin is just like transformOrigin. It's defines the point/anchor that an element will scale from and rotate around. It has nothing to do with translation, i.e. animating x and y. The difference between the two is where the origin is relative to. For svgOrigin, it's relative to the svg element, and for transformOrigin, it's relative to the element. This is a very simple problem. All you have to do is get the center of 2 bounding boxes, and then subtract the difference.
  15. Scaling parent and child element

    Hi @hanslibuzli GSAP uses a ticker, which is one continuous rAF loop that drives every animation. You can tap into it, which is nice for situations when you need to constantly update something, like a canvas animation. The ticker will power down when there are no active animations or listeners. https://greensock.com/docs/TweenLite/static.ticker You could actually use GSAP's ticker instead of calling requestAnimationFrame. It actually might be better because it will be synced with GSAP's update cycle, it just requires a little more code. var running = false; page.addEventListener("mousemove", function(event) { if (!running) { TweenLite.ticker.addEventListener("tick", onMove); running = true; } }); function onMove() { ... TweenLite.ticker.removeEventListener("tick", onMove); running = false; } About the artifacts in Safari... wow! Scaling can cause all sorts or weird rendering bugs. I'm not around a Safari browser at the moment, but have you tried setting will-change: transform in your CSS? @Jonathan is probably the best person to ask about what is going on. Perhaps he can chime in and offer some suggestions. He seems to always know some weird CSS hack to fix every rendering problem.
  16. Loops and arrays in TweenMax?

    BTW, there is only 1 box variable, and it's not copying the object. You can copy the value of a primitive (string, number, boolean, null, undefined, symbol). // Copies value var foo = "eggs"; var bar = foo; foo = "ham"; console.log(foo); // "ham" console.log(bar); // "eggs" For everything else, it's not that straightforward. Try searching for pass by value and by reference as it can be hard to explain. Variables do not store the value of an object, they just hold a reference to an object's location in memory, kind of like a home address. And just like your home address, it can be passed around and be used by more than 1 person. Notice how alpha and bravo appear to have the same value, but they are not equal. On the other hand, alpha and charlie are equal even though I changed the value of the msg property. That's because they are pointing to the same object. var alpha = { msg: "Hello World!" }; var bravo = { msg: "Hello World!" }; console.log(alpha === bravo); // false // Copies reference var charlie = alpha; charlie.msg = 123; console.log(alpha === charlie); // true console.log(alpha.msg); // 123 console.log(charlie.msg); // 123 And about there only being 1 box variable, that's because of something called hoisting. There is no difference between these two loops. All var declarations are moved to the top of their scope by the JavaScript compiler, so the first loop will end up looking just like the second loop. for (var i = 0; i < 2; i++) { var box = boxes[i]; } var box; for (var i = 0; i < 2; i++) { box = boxes[i]; } That's why this crazy looking code is totally valid. The num variable gets moved to the top. num = 8; num += 4; var num; console.log(num); // => 12
  17. Loops and arrays in TweenMax?

    Yeah. It's faster, easier to read, and less error-prone. In the first loop it might seem pointless, until you want to add another tween and have to type boxes again. In the second loop, it's more apparent. // harder to read, and easier to make a mistake for (var i = 0; i < boxes.length; i++) { rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height); }
  18. Loops and arrays in TweenMax?

    And it looks like @Sahil demo is almost identical to mine
  19. Loops and arrays in TweenMax?

    Hi @Annika Providing a simple demo is always the best way to get help, even if it doesn't work. You only have 1 object, demos, but you need 2 objects. The best way to go about what you're doing is to create an array of objects. You can add more animations later by adding another loop, but this should help you get started.
  20. how to debug DrawSVG in Angular?

    And here's an old DrawSVG demo from Angular 2 that might be of help.
  21. how to debug DrawSVG in Angular?

    It always hard to tell what's going on with projects that import files. For a quick sanity check to see if the plugin is even loaded, try to log out the version the number. console.log("DrawSVGPlugin Version", DrawSVGPlugin.version) You can also see what plugins are loaded by logging this out. console.log("GSAP Plugins", window.com.greensock.plugins)
  22. Controlling Speed of Tween

    Tweens usually aren't ideal for user controlled animations, like with moving an object around in a simulation or game. Not saying you shouldn't use a tween, it's really hard to say without seeing what's going on, but a physics based animation might be easier to control. If you want to use a tween, @PointC suggestion of using the ThrowPropsPlugin might work well... And if you're interested, here's a good intro to physics book. I don't know if it will apply to what you're doing, but there is a chapter that goes over buoyancy. http://a.co/cVI6Qww
  23. How to toggle tweens in a DRY fashion

    Nice job @maxxheth This was my way of giving of everyone a soft introduction to creating animations in a more object oriented way using jQuery. If you want to take it a step further, the pattern I'm using could easily be adapted for ES6 classes.
  24. Over 400 svg elements performance

    Oh my... I ended making a little tool to help because I have no idea how to make a sprite sheet in Illustrator. If anybody knows, please let me know. This outputs all the magical numbers I need to make it work in PixiJS.
  25. Over 400 svg elements performance

    Hi @kaliel I was in the middle of making a demo for you, when I noticed a problem, so hopefully you can help me out. I modified the SVG from your demo so everything is positioned in the top-left corner, and that works great. But I need another SVG. The problem is that most of the logos are so close together, that the frames are overlapping, so the edges of others logos are visible in a lot of the sprites. You can see what I have so for. It's more noticeable on the larger logos. And I still have a little work to do, like making it responsive, but the performance gains should be pretty obvious. So I need 2 svgs. The current one, with everything in the final 2018 position, and one where the bounding boxes of the different logos won't overlap with each other. How that is setup really doesn't matter. I just need to be able to cross reference the positions for each element on the different SVGs. Ideally, the data from that could just be converted into something like a json file so you don't have to parse the SVG at runtime. cc @alaric I'm still going to get to your SVG doing something very similar to this using, so I'm thinking I will need the same thing from you.