swampthang last won the day on June 19 2016

swampthang had the most liked content!

swampthang

Members
  • Content Count

    304
  • Joined

  • Last visited

  • Days Won

    1

swampthang last won the day on June 19 2016

swampthang had the most liked content!

Community Reputation

105 Specialist

About swampthang

  • Rank
    Advanced Member
  • Birthday September 11

Contact Methods

  • Skype
    swampy1956

Profile Information

  • Gender
    Male
  • Location
    Louisiana

Recent Profile Visitors

2,786 profile views
  1. swampthang

    center groups

    Thanks a bunch!
  2. swampthang

    center groups

    Ahhhh, ok. So trying to set an origin on a `<g>` element doesn't work?
  3. 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..
  4. swampthang

    Animate a handwritten signature

    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:
  5. swampthang

    Animate a handwritten signature

    Figured out a way to reorder. Gave GSAP a little plug here: https://github.com/mikolalysenko/vectorize-text/issues/13
  6. swampthang

    Animate a handwritten signature

    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?
  7. swampthang

    Animate a handwritten signature

    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.
  8. swampthang

    Animate a handwritten signature

    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.
  9. swampthang

    Animate a handwritten signature

    Check this out you guys... https://github.com/techninja/hersheytextjs
  10. swampthang

    Animate a handwritten signature

    Thanks, Mikel. Checking this out now.
  11. swampthang

    Animate a handwritten signature

    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!
  12. swampthang

    Animate a handwritten signature

    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?
  13. swampthang

    jQuery UI Resizable with GSAP Draggable

    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.
  14. swampthang

    jQuery UI Resizable with GSAP Draggable

    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.
  15. swampthang

    Draggable drag and snap to new container

    Ok, not to beat a dead horse (wait, is that no longer politically correct?), but here's another approach. Rather than using snap at all, this uses hitTest and lockAxis.