Jump to content

swampthang last won the day on June 19 2016

swampthang had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by swampthang

  1. Just curious. Looking at this thread, though it is 2 years old, I wondered if you had changed your mind on possibly releasing it some time in the future... Sorry if I put you in an awkward spot.Certainly didn't intend to do that.
  2. Hey, @GreenSock, have there been any updates to PathEditor lately?
  3. Makes complete sense. I went ahead and changed the app to use a sequence of show/hide set pairs and it's working great. Thanks for the beta link, the thorough explanation of what's going on here and once again - for an awesome library!
  4. OSUBlake is right regarding setTimeout. Take a look at the last codepen i posted above and see if that might help. It's proving to be much more reliable.
  5. This seems to be working better... https://codepen.io/swampthang/pen/WBMWwM?editors=1010
  6. If you inspect the page and use the step button, it seems like I might not be calculating the frames correctly. Could that have something to do with it? Every once in awhile I see 2 visible images trigger at the same time or 2 hidden images trigger at the same time.
  7. Try reloading the page and then begin stepping through the animation without actually playing it.
  8. I'm not so sure. I'm experiencing the same issue in a PNG sequence that runs in an Electron app that loads images locally and won't run until all images have officially loaded. I'm not using base64 images either. The images are transparent PNG files (created from an MOV file) ranging in size from 8K to 276K so not huge files. I created a simple codepen that shows the same animation that hiccups in the app but seems to work fine in Chrome... https://codepen.io/swampthang/pen/LoQqyO In Chromium 69, the first time I ran the animation, I did notice a flicker right at the end. Also, if you don't play the animation initially, but just step through the frames, you'll more often see a misfire. Here's the thing though... In the app, once a flicker happens it seems to 'stick' to the animation because I can step through the animation one frame at a time and when I get to that point, the image visibility remains 'hidden'. So it seems like whatever causes it to skip that frame gets "remembered" by the timeline. I wondered if the _gs objects that get attached to elements sometimes get cached and work both ways. I'm probably making no sense - just trying to figure out what's up. I'll look in to creating a sprite but can't go to that at this point. Any insight into what might be happening would be greatly appreciated.
  9. Ahhh, ok. Yea, that actually did fix it. The only thing I'm concerned about though, is there are some pretty involved animations and can potentially be a bunch of them stacked together. Was wondering if there's a way to limit the scope of that. For example, we have SVG elements being drawn in on one layer that's not in a foreignObject, of course, but those show up in the stacking order. Can setting defaultForce3D: false on an element be changed to true later? In this CodePen, it seems to work to set it to false on each element right after restacking them and then setting it to true in the animation. https://codepen.io/swampthang/pen/gyZMRJ?editors=1010 What's crazy is older versions of Chromium didn't get confused like this.
  10. Let me start by saying that I know this is a Chrome/Chromium issue. The CodePen works as expected in Firefox. Also, I know Blake has warned about using foreignObjects but I'm stuck with using them because, in my app, I have to use foreignObjects to render image layers to canvas creating a stack of PNG sequences inside a master SVG. I'm also forced to be able to support Chrome/Chromium. Here's the deal. I've run into a stacking context issue which I thought I had resolved before by doing something subtle to the SVG container using TweenMax to force the browser to do a redraw. Here, though, the issue is a little different. I have to allow my users to shift the order of each foreignObject which I accomplish using a javascript insertBefore. But, as you can see in the CodePen, if you shift the animated element to the back of the stack and then re-run the animation the browser is rendering it on TOP of the stack for as long as the animation is running. Then, once the animation is completed, the browser renders the element to the back of the stack where it belongs. Forcing a redraw like I've done in the past is not working. Any help would be greatly appreciated.
  11. Ahhhh, ok. So trying to set an origin on a `<g>` element doesn't work?
  12. swampthang

    center groups

    I feel like an idiot asking this because I thought I knew how to do this. I'm trying to move all `<g>` elements to the center of an SVG. The first one seems to work but the other 2 barely move. I'm having a brain cramp. Probably not enough sleep..
  13. Spoke too soon. Strings containing letters, 'i', 'j', etc contain 2 paths. Gonna have to parse through each string and add to the number of paths based on that. Here's a better solution: That seems to have fixed it. Here's an MP4 that was output from the app using that same code:
  14. Figured out a way to reorder. Gave GSAP a little plug here: https://github.com/mikolalysenko/vectorize-text/issues/13
  15. I've figured out a way to sort of simulate line drawing of outline text by: using mainly thin fonts set the stroke to transparent fade in the fill over the same period of time the drawing tool draws in the stroke. Below is a video I exported from my app that results from doing just that. I am using an npm module called vectorize-text to convert text to svg paths. It works great but due to its asynchronous array assembly the letter paths get returned all out of order. One of the cool things about that library is the option to support line breaks in the string that gets passed to it. In the video example below, it's easy enough to sort the letters by x coordinates using MorphSVGPlugin's pathDataToBezier function because there's only one line. But that falls apart when you start with a wad of paths on various lines that can be in any order. But, once I figure out how to sort by x/y (I'm using Lodash) I think I'll have this licked. Here's a codepen where I'm trying to accomplish this. For the codepen, I just stuck to simple drawing in of the stroke WITHOUT the "slight of hand" - excuse the pun Anyone know right off how to resort the paths so they're in order?
  16. Thanks. I think we're gonna have someone create a set of fonts in an SVG and work through all the data. Sure wish there was a reliable way to auto-convert fonts. The more I looked into that, the more I realized what a can O worms I had opened.
  17. Yea, PointC, you're right on needing more control over these. I created a codepen using the hersheytextjs sample linked above and added drawSVG. It's pretty ugly. Now I'm trying to find out how to do what you mentioned... I'm thinking we might hire someone to come up with a few font libraries but I'm not sure how to incorporate this. PointC, do you mind "Point"-ing me in the right direction? My first thought is to create an SVG font and find a way to connect the alphabetic characters to them. I'm just not very familiar with how this is done. I think if there were a few fonts available to GSAP users this could be a very popular option. Would still love to find a reliable way to convert a ttf into a single-line font.
  18. Check this out you guys... https://github.com/techninja/hersheytextjs
  19. Thanks, Mikel. Checking this out now.
  20. I wonder if there's a way to create a variable sized pen-nub that would act like a pin-ball inside each of the closed path points and create new paths that sort of bounce around and "scribble in" the fill area? If the pen-nib were smaller, it would take more paths and if the nib were larger, it would take fewer. For me that's a new brain cramp but seems like something that one of you brainiacs might be able to pull off!
  21. Very cool example, PointC! Does anyone know of a way to dynamically convert a text string to an SVG for animating drawing the text? I'm aware of some libraries like this - https://www.npmjs.com/package/text-to-svg but everything I've seen converts text to outlines rather than a solid path like PointC's awesome example above. Here's a codepen that shows text conversion to SVG from my nodejs app. What I'd love to know is if GSAP has some nifty tool to dynamically convert the fill itself to a path that can be drawn using drawSvg. The only way I know to convert a font's vector data into an svg results in outline paths with a fill so drawSvg ends up drawing the outline paths. The example above (PointC's Draw Signature codepen) is exactly what I need to get to. Is there anything like MorphSvg.convertToPath() that will convert a path with a fill into a path that results in a single draw path?
  22. Hey, Jack. Thanks for the reply. In the codepen, and in my app, I'm using 2.1.2. Also, in the app, I was setting the data-clickable attribute like this... $('.ui-resizable-handle').attr('data-clickable',true); It might have been the order in which things were being set up but I'm waiting until the resizable is set up to be sure the handles exist. Either way, I've got it all working in the app. Just so you know, the only reason for my post was in case anyone else might have been trying to incorporate both and were unable to get it to work.
  23. I noticed, after upgrading to the latest (2.x) version of GSAP that my old code for integrating jQuery UI's resizable was not longer working. I forked a previous codepen from a recent post and added the fix for that in case anyone else has this issue. The difference is twofold: First, I had to set `dragClickables: false` in the draggable setup even though it's my understanding that Draggable ignores anything with the attribute of 'data-clickable' by default (note that I'm adding the data-clickable attribute in the create callback for resizable). Second, had to add this in the `create` callback for resizable: $('.ui-resizable-handle').attr('data-clickable',true); $('.ui-resizable-handle').on('mousedown', function(){ draggable[0].disable(); }); and this in the `stop` callback: draggable[0].enable(); I hope that helps anyone else who might encounter this issue.