Z-style underline as a focus indication in input fields

[the.bolmanator]

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.

 

 

 

See the Pen mPdoWb by Bolmanator (@Bolmanator) on CodePen

[PointC]

Hi the.bolmanator 

 

Welcome to the forums.

 

Some of your lines look like they're animating in the wrong direction simply because of the way they were first created. It may look backwards to our human eyes, but the browser just assumes that's the way we want the direction to go. It all depends on where the first point of the line is placed. Don't worry though, if a line is 'backwards' you can easily animate it in reverse without having to recreate the SVG.

 

The easiest way to do that is by animating the line in reverse with percentages.

// this is forward
.fromTo(element, .5, {drawSVG:"0% 0%"},{drawSVG:"0% 100%"})
// this is reverse
.fromTo(element, .5, {drawSVG:"100% 100%"},{drawSVG:"0% 100%"})

I've forked your pen with those changes so you can see how it works.

See the Pen YqPwPy by PointC (@PointC) on CodePen

 

As far as naming elements with classes or IDs, it's up to you. GreenSock will handle either just fine. What you can do though is make a group of lines and then animate them at the same time. In that case you wouldn't need to name the individual paths with any classes or IDs. Say you have a group called '#myLines' and there are 20 different paths that you want to draw. You could then animate them like this:

.fromTo("#myLines path", 1, {drawSVG:"0% 0%"},{drawSVG:"0% 100%"})

Hopefully that helps a bit.

 

Happy tweening.

[Carl]

Great job, Craig!

 

The bolmanator,

 

Regarding IDs vs classes there really aren't any hard rules that need to be followed. However, the industry as a whole has moved away from using IDs to style elements but its ok to use ID's to select elements (for js use). So in other words if you have a div that needs to be 100px by 100px wide and red that you need to animate it's recommended to do

 

//css
.redBox {
  width:100px;
  height:100px;
background:red;
}


//html
<div class="redBox" id="redBoxToAnimate"></div>

//js
TweenLite.to("#redBoxToAnimate", 1, {opacity:0});

And yes, people will also advise not to put the actual color in the class name (.featureBox better than .redBox) as if you need to change the color to blue you have to make a zillion changes. Hopefully in the context of the example I do not get publicly shamed

 

Regarding whether or not you should select elements by class or ID

TweenLite.to(".line1", 1, {opacity:0}); //class
TweenLite.to("#line1", 1, {opacity:0}); //ID

Some will say ID is faster but I think its rare you would notice a difference. Definitely use class if you need to select multiple elements with the same class.

 

Hope this helps a bit.

[the.bolmanator]

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 

[the.bolmanator]

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.

 

See the Pen reVYrY by Bolmanator (@Bolmanator) on CodePen

[PointC]

Hi again the.bolmanator 

 

Your 'Z' animation is looking good. The 'auto' you're thinking of is autoAlpha. It's a combination of opacity and visibility.

 

From the docs:

 

autoAlpha

• Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

If you want to stagger the fade-outs you can do that with staggerTo().

 

Please try changing the last part of your timeline:

//instead of this
tl.to(".line1", 2, {opacity:0})
  .to(".line2", 1.5, {opacity:0})
  .to(".line3", 2, {opacity:0})

// see if this is more to your liking 
tl.staggerTo([".line1",".line2",".line3"], 1, {autoAlpha:0},.25);

All the autoAlpha info is in the docs for the CSS PlugIn:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Here's all the reading, some CodePens and a video about staggerTo():

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/

 

Hopefully that helps a bit more.

Happy tweening.

[OSUblake]

Just wondering, are you making a todo list?

 

For the fade, animating a mask would probably do what you want. That's what Chris Gannon is doinig in this demo, although he is using particles instead of path.

See the Pen VeaBVv by chrisgannon (@chrisgannon) on CodePen

 

Also, have you checked out the animated checkbox demo on Codrops? The very last demo on this page reminded me of what you're doing. You might be able to get something from that.

http://tympanus.net/Development/AnimatedCheckboxes/

[the.bolmanator]

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

[PointC]

You can add a 2 second pause by changing the last tween to this:

tl.staggerTo([".line1",".line2",".line3"], 1, {autoAlpha:0}, 0.25,"+=2");

That will make that tween wait for 2 seconds before it starts. That's the position parameter and you can use it to easily add pauses or by making the value negative, it's a way to overlap tweens. Be sure to check out Carl's great video about the position parameter here:

 

http://greensock.com/position-parameter

 

Happy tweening.

[the.bolmanator]

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.

 

See the Pen JXJdJX by Bolmanator (@Bolmanator) on CodePen

 

Again many thanks and best of luck till then,

Steve