jstafford

Thanks Blake! I appreciate it.

thanks Blake. This is the example I was using. It is very nice!

Yeah, this will be the way I go. Thank you. I will save the big guns for later.

Any help appreciated. hooking into the ng-show is not behaving as expected based on several tutorials I have seen.

Hello Greensock Community, I am very new to working with Greensock and AngularJS. I have a basic modal working where I am using ui-router to transition the view inside a bootstrap modal using ui-view within the modal-body. I also have previous and next buttons that correctly appear and dissappear in the footer based on the page you are currently on inside the modal. These buttons also navigate you to the next or previous page in the modal. What I would like to do is the following: hook into ng-show so that when true, my buttons will fade in and when false they fade out

hopefully SVG will render more universal in the browser for the future. I know I have way more control over elements in a vector file format (SVG, etc.) compared to a raster graphics image file format.

just had a eureka moment and thought I would share. this is why things look so dang good on mobile devices; http://pixeldensitycalculator.com/ just calculated my 27 inch ultra high definition monitor (3840 x 2160) and it is 163.18 ppi ; iphone6 is > 400ppi; I am sure the newest Androids are about the same or better ppi than the iphone6 despite their better display in mobile, they are using far inferior resolution on their screens. w3 will not detect this in their browser resolution capturing statistics. Sounds like this might be local data that you need to capture with your visitors (screen size + resolution) . Anyway, I am a newbie and learning this.

cool. this is good stuff. in regards to the "I did notice you are using the same id on each <svg> tag"; yes, I know id is a unique identifier compared to class . I don't think I used the id at all as the transform rotation happens on the svg element. Maybe I thought I was going to use it. I also copied that svg element to make that animation. That's why you see id more than once. The css3 transform I did here uses no greensock (I re-did this using greensock, but deleted in codepen for some reason; it was working on my local). I have since made the decision not to delete my codepens any more. Anyway, I will test out this new advice with my existing images sometime early next week.

I guess my other question is the resolutions of monitors registered at w3 does not distinguish between mobile or desktop, correct? A resolution on a mobile device while lower, may in fact display at a resolution that "looks higher"? Is this correct?

http://imgur.com/C83GAb2 Here is a screenshot of http://codepen.io/jstafford/pen/XmKEBp on my 4k monitor using Chrome48. The "stepstair" or "jagged line" are still present to a much lesser degree before applying Jonathan's technique. I have already proven Jonathan's technique works on a lower resolutions monitor for this image, but haven't corroborated it works on some of my other svg images that are more complicated in terms of path data. Anyway, I have only been using svgs for about 6 months and refining stuff I did a while back.

I incuded the paintcode link above b/c I am a little confused as to why there aren't more high resolution screens with such high use of ios and android mobile devices. Things always look so crisp and clean edged here.

thanks for responding Jonathan. Yes, I am familiar with shape-rendering="crispEdges", but some people avoid it like the plague and recommend shape-rendering="auto" instead . I will get to this sometime early next week and update you on my tests. Right now, I am converting a JSP-Spring4-Hibernate4 app to AngularJS-Spring4-Hibernate4 running on Tomcat application server. Anyway, really excited about using AngularJS view framework with Java-Spring.

http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Maybe I can do a before and after this time in codepens to show the difference in Chrome48, Firefox44, and IE 11.

I just got a 4k monitor at work, and the jagged line problem is still present on this codepen (http://codepen.io/jstafford/pen/XmKEBp) in Chrome48 (before applying Jonathan's technique, but to a much lesser degree). I have other svg images that I have already done and I am going to try Jonathan's technique again. Anyway, not many people are rocking high resolution screens still. http://www.w3schools.com/browsers/browsers_display.asp

Thanks Jonathan. I will give this a go tomorrow. I almost always use relative divs around absolute divs. In a rush to get this fixed, I don't think I did here. Thank you for your insight.

Hi Greensock community, I developed this codepen a while back, just realized it doesn't work in Firefox and IE. I like chrome, what can I say. Anyway, I am getting better at checking my animations in all the modern available browsers as soon as they are developed now. This is a continuation of a previous question here on greensock. http://greensock.com/forums/topic/13344-failure-to-create-responsive-morphsvgplugin-bezier-path-animation/ What is the difference between chrome vs. ie and firefox for xPercent and yPercent? Do I use Modernizr to screen which browser I am using and give it the correct xPercent and yPercent until the wheels are centered underneath the wheel wells? Is there a less hackish way to do this? Also, the actual center of my wheel may be off a little, there is a slight wobble to the wheel that I will correct later.

Thanks PointC! I appreciate it.

Hi, First SVG morph I have done so far and I am trying to do the infamous morph from open menu bars icon to the close menu icon. Open Menu Icon consists of three paths. 1) #open_top_bar --> morphs into #close_top_bar 2) #open_middle_bar --> autoAlpha to 0 3) #open_bottom_bar --> morphs into #close_bottom_bar Getting some errors in my console I don't understand that results in no morphing. Uncaught TypeError: Cannot read property 'toUpperCase' of undefined Doesn't give me a line number but I assume one or more of my selectors is returning null?

Thanks PointC. Tricky stuff.

well, just going with the single column category 1. if you guys are too busy for this, I understand.

Thanks Jonathan and Carl ! I had no idea about the display property set to block or inline-block. I was building upon what Carl helped me out with yesterday and I ran into a problem that is confusing to me. http://codepen.io/jstafford/pen/eJMrrr I expanded my submenu items to the actual # that I will be using in production and felt that breaking the 14 items in the red submenu into two columns looked a little better. The animation works fine going going from the main menu to the blue submenu and back, but for the red sub menu it has problems with the backlink being clickable (red sub menu to main menu has problems, main menu to red sub menu works fine). I am sure I am dealing with a autoalpha being off, but I don't see it or understand it. Again, backlinks on the red submenu is top one of the 1st column and blue submenu backlink is top one of only column.

Hmm...it only works the way you wrote it. So, you are changing the autoalpha on the menu and the containers Also, I was thinking about your change from pointer events to autoalpha. Will this be better supported using Greensock's autoalpha? I was looking at the browser statistics a few days ago, and the internet explorers that can't support pointer events (ie 10 and less) are a very small fraction now. http://www.w3schools.com/browsers/browsers_explorer.asp It is still nice to use autoalpha if it can support those remaining ie 8-10's that are still being used.

Wow Carl ! I am glad I reached out for help. Slight correction on your awesome answer. http://codepen.io/anon/pen/xZWRZK I think you were wanting to hide both submenuCategory1 and submenuCategory2 in the hideSubs() function. I will digest your answer some more, but one question for now before I tinker with it. You are only setting the actual menu with autoalpha, not $("#menu .container") . I guess it still works b/c of the cascade down to the smaller elements within the menu div (i.e. containers).

Carl, this is what happens when I put the menus under the same parent site div and remove z-indexes from menus. http://codepen.io/jstafford/pen/VeXKKO Menu animation indeed works, but elements are not layering as expected. Is there a way to take care of this without z-index? And yes, the page transform barely makes it into view at the bottom.