the.bolmanator

Blake, In the spirit of full disclosure, I must share that the reason I was being sent to the GreenSock home page was because I had inadvertently included a 'src=' that was (as you predicted) was still pointing to "a version of the plugin that would only work on certain domains like..." so not surprisingly the (correctly referenced) local <script src="vendor/... was simply being contradicted by the reference to the remote src, So lesson learned, keep all <script src=... statments in the head so as not to entertain duplicates (then reshuffle them for distribution). My apologies, as much as I would like to share my work so far; it is so completely unimpressive that I would like to ask that if anyone is following this (and I have seen no indication that anyone actually is) to message me if they would like to see my progress on the Angular2 input form that uses the z-style-underline as a focus line with sketchy input. Summary: I am happy to report that as evidenced in the work provided by Blake in fact GreenSock is happy to play with Angular2 thanks to Blake's fine efforts we have a very elegant pattern to follow in doing this. The only one bit wisdom I may have been able to contribute to this is the addition of declare var TimelineMax: any; to the top of the "app/org_header_input.ts". This may not be for every specific environment but it made my particular stack much happier. import { Component, ElementRef, OnInit } from 'angular2/core'; declare var TimelineMax: any; @Component({ selector: `[z-underline]`, So let me describe where I am going with this mundane little component. User will be completing a document information for an "engineering calculation worksheet" Project : My Project Title: Some Really Hard Calc Client : Some Client Document: 123-456-789-AB Reference: Usually PO Number Revision: IFC1 Rev. Date: 04/11/2016 Author : Someone Smarter Checker: SRB Chk. Date: 04/10/2016 The above fields will reside in an Angular2 "ControlGroup" thanks to Angular2 FormBuilder. Each field above will be an Observable and this will allow the group to be have their visibility "subdued" when the ControGroup has focus, the specific field that ACTUALLY has focus will shift slightly up and increase in size ~5% and in general make clear that "hey I have focus". On Blur the field would adopt the condition of it's siblings, on selected the z-style-underline will draw beneath the input field with a length equal to the limiting width of the field. On loss of focus the line will fade out as shown in the animations. Again my apologies for the hand-waving and promises. While this has been a time consuming activity the results are satisfying (again many thanks to Blake) and I look forward producing a novel (albeit retro) user experience, based on paper and pencil. I will be using what I learn in may ways as I build out my application, so it is defiantly time well spent. Steve

Blake, I think I am very nearly there. I did however simplify things a bit (I think). I really like what you did in your Plunker, but when I set it up, it complied perfect but nothing worked. So then I went back to my old CodePen version and pasted the HTML and JS just into an element and pulled that element into a Angular2 Component template, that works except that when I import drawSVG via good old fashioned <script> into my HTML the app is taken to Greensock. I take this as a sign that I am very close, but cannot quite seal the deal. What is the best practice for importing drawSVGPlugin when working from an IDE? Thanks, Steve

Blake, Many thanks for your work on the above subject. I wish I were actually able to contribute more than just questions, but I just cannot adapt to the CodePen environment. I completely agree with your comments on Angular 2 it is a complete redo and would have been better, renamed to limit the confusion. If you are interested in learning more I strongly recommend the book by Ari Lerner https://www.ng-book.com/2/ it is really excellent and the associated community https://gitter.im/ng-book/ng-book is helpful as well (of course nothing like my friends at GreenSock). I am now sure it is possible, and probably easy, to animate Angular2 components using GreenSock (including drawSVG). However it will need to be done by someone more expert than I. I keep getting hung-up by the most mundane problems, like importing drawSVG using WebStorm. This is not a GreenSock problem, it is mostly my problem and secondly a problem with the maturity of Angular2 and every tool that has to interface with it. FYI, I have tried the http://greensock.com/forums/topic/13445-using-gsap-with-angular2/ and had no luck with that solution. My hat is off to you, for getting this conversation as far as you have. I am just not able to take it from the CodePen (js) and translate it to the TypeScript and SystemJS + Webstorm that I am working in.

Blake, This is really great stuff you have shared. I have learned very much from your example. I cannot say how long it will take me to figure out everything that you have done to get this to work but you have inspired me to try again, now knowing that it can be done. Please understand that I know only a very little more about Angular2 than I know about GreenSock, which all who have seen my posts can see is precious little. As a somewhat comical example of how with even as little knowledge as I have, I managed to blow up my CodePen account. this was done while trying to integrate your example with my z-style underline. It seems the css was corrupted (or something else I cannot imagine), I took a screen capture of what the results were. I share this in hopes of helping anyone else who may experience a problem like this. My advise to them is 'remain calm and wait about an hour and things will gradually return to normal' (beyond that I have no clue what happened). I have captured many of my learnings from your post and will try to highlight them when(if) I am ever able to get this example working. I will not be attempting this in CodePen again as this environment adds several challenges when working with this framework (or at least so it appears to me). I added svgDraw to your file, and attempted to replace a single path <svg> in the template and attached the CodePen below (not working but at least displaying correctly now). http://codepen.io/Bolmanator/pen/qZPMjo For some reason the pen.js file (whatever that is) is still looking for the BlobMorpher (is not compiling the TS correctly?). I see there are errors in the TS compile, in CodePen, but these are present in your working file as well. When time allows I will take attempt this using WebStorm I hope this will at least remove some of the variables from this problem. Again, many thanks and I will keep you posted as to my progress (likely not for a few weeks as family commitments are consuming my weekends), Steve CodePen_CSS_Meltdown.pdf

All this and solid business model coaching gratis. Many thanks for the post, and all you do to inspire.

Well, I have had to throw in the towel on this effort for now. While I did If someone figures out if/how a simple SVGdraw (see z-shaped underline) animation can be done in Angular2 I would be very keen to hear. Till then I fear I am going to have to move on and leave out the animations for now. Thanks for all the help. While it may not look like much, below is my final z-shaped sketchy underline. I was pretty happy with it. Ultimately I would like to control the SVG color and point locations via bindings and I expect the integration I am looking to achieve with Angular2 will need to wait for now. http://codepen.io/Bolmanator/pen/JXJdJX Again many thanks and best of luck till then, Steve

Are there any updates on the subject of improved Angular2 support? I am most interested in SVGdraw within Angular2 components. If someone figures out if/how a simple SVGdraw (see z-shaped underline) animation can be done in Angular2 I would be very keen to hear. Till then I fear I am going to have to move on and leave out the animations. Best regards, Steve

Again many thanks, you folks are great to be so helpful. What I will have when finished is a Polymer iron-input field in a custom-container element (much like the paper-input element in Polymer). The function of the z-shaped underline is to indicate that the input box has focus, and this fade effect will be 'onBlur' (loose focus). I will have a bunch of these input fields (containers) on a form, that I am trying to make as near real paper and pencil as practical. So I am using various handwriting fonts and avoiding frames around input (much like many of the Polymer Paper-Input elements). The purpose of this z-shaped underline (there will be many flavors when finished) is to provide focus indication without puncturing the look and feel of paper & pencil. If I may impose on you again, I am wondering how to apply a "pause(2)" to pause for 2 seconds between the draw and the fade effects of the current timeline, while not applicable in the final version it will look better in the codepen example. I intend to keep this thread open till I finish (I really hope by this weekend) working on this first version of my 'sketchy-input'. Again many thanks for the help. I was actually close to getting it to work... it was that last "stagger:Number" argument that I was missing. I did like the check box examples, If I were to do that I would want have a number of svg (lines) and pick one to use at random, Like the SVG is already there for four (4) to-do entries. Put the SVGs in a library and pick one at random, that way when you select deselect and deselect the same element you are not seeing exactly the same sketchy lines. But the concept is much the same. In fact now that I am thinking of it, I will commit to having that in the final codepen of this string, Partly cause you folks are so darn helpful Many thanks, Steve

Update So I have adjusted the color and added a fade out effect. I read somewhere about an auto??? feature that is preferred to animating the opacity was anyone know what I am thinking about? My question is how to stagger the start of the fadeouts so it looks more like a bleed from top down (all are fading but start from the top). Sorry, I am trying but something is not clicking in my head yet. http://codepen.io/Bolmanator/pen/reVYrY

Many thanks to Craig and Carl for your help and helpful comments. I have massaged this into something that better matches what I hope the final product will look like. Of course it is not a real input field, and the final result will draw and remain until a loss of focus on the input. I will also be producing different colors however this is will be done in Illustrator and pasted in. Something I will continue working on is moving as much of the svg into the css, I am not sure why I was having difficulty with this but did not seem to respond as I expected but had very limited time to work on it this evening. Thanks for the clarity on classes makes perfect sense. http://codepen.io/Bolmanator/details/ZWYyva/ I will continue to reflect my progress on this string till I finally get the Polymer 1.0 iron-input in a custom-input-container that is as near a real piece of paper and pencil form as I can manage. I am shooting for as "old school" graph paper and and written sketchy work in a free form web app. I have bits of it working but it is slow going at times. This really works great! thanks for now. Steve Many

I would like this svg to 'appear to be drawn in a z-form. meaning top (green) line from left to right, then (red) line from where the green line leaves off and returns diagonally right to left, then finally the bottom (black & grey with shading) lines are drawn again left to right. There are two lines that form the bottom line, they should draw at the same time, each of these four lines need to be drawn separately to allow the path width to change a little across each direction change and the two lines (as well as allowing for shading of one) allows the width of the combined line to give change a little and this (I hope) lends a real sketchy nature to the final result. I understand (I think) that the there should be a tween in which each of the three individual line drawSVG effects occur (Note again that the two lines (id="line3") should draw concurrently). I was able to get the sequence right at one time, but the directions never were correct, and then it broke and would not work at all. So I have at least reconstructed it to a place that at least all the parts are present and I think the concept is pretty clear. Things that I would like to really understand; How to assign either an id or class name (I know there was much said about assigning a 'var' to each element and then using the var as the id in the svg; but there are some examples preferring use classes (not clear to me if there is a clear difference in this or cases where one works and one does not). To be honest I have found pretty much everything to be complicated (this is more a feature of JS rather than GS). By the way, I prefer a single more complicated solution that ALWAYS works than some mix of sometimes works easier methods. Once we get past the naming conventions/preferences then we have the nesting of drawing elements (timelines) or delays, either is great, but I am not totally convinced that a TL is needed for something as lightweight as this example (I do like them). Finally once this all works it is my "hope" to be able to export the shading block from the inline SVG to the CSS file. Sorry for the verbose nature of this post, I hope that this will prove helpful to others with my learning style. Something that would be really helpful is a subset of Forums that cover these just starting out sort of items. I had scanned the forum titles as well as searched for both "beginner drawSVG" and "newbie drawSVG" so I am thinking my question may be novel, but if not sorry I tried.