failure13

http://codepen.io/failure13/pen/iBcxJ Why on mouse out this border width fade happens? How can i avoid it by still keeping className rule approach in TweenLite? Thx in advance!

jonathan Looking awesome! Thank you

Is there any fast & easy way of making something like that menu with GSAP? http://www.soundsonline.com/Hollywood-Strings

So, you don't experience same issue with my code?

jonathan I use valid Win XP VirtualBox image, with it's default IE6, and IE7-8 are from http://utilu.com/IECollection/ which also seem to be very close to originals

Hi guys, i still have question, now it's about IE6! http://codepen.io/failure13/pen/xcLuf Above example works everywhere except IE6-8, it do first part of job - making circle orange on hover, but it doesn't affect twitter sign.. Any advice?

jamiejefferson Sorry for late reply! hmm...Your particular example doesn't seem to work with my code, but idea is definately cool, i always forget about this awesome reverse feature!

carl schooff Ha, for real! Wonder why it happens... Thx Carl! But then i have this problem, that scrollbar of main frame disappears if i remove height: 100%; from body P.S. I think i got it, it's not body, but html matters, if i set html's overflow as auto, and body as hidden, everything is fine! Thank you for help And here is pen http://codepen.io/failure13/pen/LwCgt

Hello & sorry for all the troubles) Well technically i had all needed plugins in html - gear icon - "stuff for head" area as if it was normal html's head, and with TweenMan it seem to work good, you think that could be a problem for ScrollTo that i used html's gear instead of js? Anyway, it doesn't work locally with pretty much same case, so i guess it's not the root of the problem.. http://codepen.io/failure13/pen/LwCgt Here i've updated it with ScrollToPlugin imported via js, and TweenMax via html (since i have only one external JS file section to enter for some reason, unlike in your pen) But still it doesn't seem to do simple: TweenLite.to(window, 2, {scrollTo:{y: 600, x:0}, ease:Power4.easeOut}) P.S. Thx for body tag notice, i'll keep it in mind

Yep, i just thought maybe there's something else involved...hmm don't understand, the basic idea looks like this with fixed menu: http://codepen.io/failure13/pen/LwCgt Here it is without your code, i've just inserted: TweenLite.to(window, 2, {scrollTo:{y: 600, x:0}, ease:Power4.easeOut}) Which doesn't seem to do what it should (shift down for 600px on start i suppose), looks like as if plugin haven't been imported.. Maybe it's about how i implemet crossbrowser way of mimiking CSS position: fixed for header to let it work in IE6? Looks like it may think that window in this case = menu, not to 'main', therefore no visible changes happen? P.S. I imported classes into html's head here

To use it i need to import jQuerry, TweenMax, scrollToPlugin, anything else? Strange but locally it doesn't work, codepen is perfect though

jonathan Exactly what i needed! Thank you very much for example

If i have let's say such menu on one page layout: <ul id="menu"> <li><a href="index.html#menu1" class="active">Company</a></li> <li><a href="index.html#menu2">Products</a></li> <li><a href="index.html#menu3">Partners</a></li> <li><a href="index.html#menu4">Support</a></li> </ul> How to make it tween slowly from one page area to another, when you navigate?

jamiejefferson Thanks for clarification man, it helps a lot! As for this tricky method of clicking, it works absolutely great, never fails like before! But is there any way to make something solid and unmistakable like it is now (super fast click & go to right section), except previously selected menu entry would fade with tween animation after beeing pressed, not disappear immideately? I guess it would be something liek creating var for selected class before killTweensOf? http://codepen.io/failure13/pen/LwCgt

jamiejefferson Awesome man, thank you so much! Everything works perfectly now Well, that is absolutely true, when i read raphael docs and watch examples code... Well let's just say if you want to work effectively with Raphael, you need to be very deep rooted with js. Not trivial stuff in there, unlike gsap, which seems to be very friendly for everyone! Could you please give some little example of what exactly you mean by this and what exactly those cross-browser compatibility problems could be in such case would be? I'm very much concerned about everything which touch cross-browser topic, and want to be sure of what i'm doing in this field.

jamiejefferson Hey, thank you very much, that helped a lot! And sorry for non GSAP, i just thought it could be connected, like maybe i need to target somehow an array or stagger, or something like that... GSAP works very good with raphael i must say! And to complement their conjuction, i've found this cool site, which allows you to convert any .svg to raphael code, very cool script! http://irunmywebsite.com/raphael/SVGTOHTML_LIVE.php But i still got little question about it, hopefully you can help: http://codepen.io/failure13/pen/pLCaG here i updated pen, and right at the end of js if you will outcomment this line: TweenMax.to($('.rocket').raphael, 1, {raphael:{ty: -500}, ease:Power1.easeInOut, repeat: 1, yoyo: true, delay: 1.4}); It won't work... I don't understand why, logically it should, coz everything else works by the same concept you mentioned above, i guess... And also here is more complex raphael, which have tow objects: circle with outline and twitter sign: $('.twitterCircle').each(function(i) { var paper = Raphael(this, 64, 64) this.raphael = paper.circle(32, 32, 30).attr({fill: '#FFFFFF', stroke: '#F5782E'}); this.raphael = paper.path('M26.492,9.493c-0.771,0.343-1.602,0.574-2.473,0.678c0.89-0.533,1.562-1.376,1.893-2.382c-0.832,0.493-1.753,0.852-2.734,1.044c-0.785-0.837-1.902-1.359-3.142-1.359c-2.377,0-4.306,1.928-4.306,4.306c0,0.337,0.039,0.666,0.112,0.979c-3.578-0.18-6.75-1.894-8.874-4.499c-0.371,0.636-0.583,1.375-0.583,2.165c0,1.494,0.76,2.812,1.915,3.583c-0.706-0.022-1.37-0.216-1.95-0.538c0,0.018,0,0.036,0,0.053c0,2.086,1.484,3.829,3.454,4.222c-0.361,0.099-0.741,0.147-1.134,0.147c-0.278,0-0.547-0.023-0.81-0.076c0.548,1.711,2.138,2.955,4.022,2.99c-1.474,1.146-3.33,1.842-5.347,1.842c-0.348,0-0.69-0.021-1.027-0.062c1.905,1.225,4.168,1.938,6.6,1.938c7.919,0,12.248-6.562,12.248-12.25c0-0.187-0.002-0.372-0.01-0.557C25.186,11.115,25.915,10.356,26.492,9.493') .attr({fill: '#F5782E', stroke: 'none'}).transform('t17,16 s1.4'); }); $('.signs64').hover(function() { TweenMax.to(this.raphael, 0.2, {raphael:{fill: '#FFFFFF'}}); }, function() { TweenMax.to(this.raphael, 0.35, {raphael:{fill: '#F5782E'}}); }); I want to change color of circle fill to orange and twitter to white on hover, but not sure how to target circle and twitter sign separately. I've tried stuff like this.raphael.paper.circle that was bad guess.. Well, absolutely, that would be extremely handy, but i've heard somewhere that if you won't target as $(this) instead of just this everywhere you could, it could give you trouble with older IE (which i sadly had to deal with ), is this incorrect?

Here's my example: http://codepen.io/failure13/pen/pLCaG What i want is just the function right at the end of js tab to work, i mean this one: $('.signs32').hover(function() { TweenMax.to($(this), 0.2, {raphael:{fill: '#222222'}}); }, function() { TweenMax.to($(this), 0.35, {raphael:{fill: '#F5782E'}}); }); But i absolutely don't understand how to target each icon more specific... The goal is just to change color of each mouseover element hovered at the time, which belongs to common class .signs32. Can somebody help me please?

jamiejefferson Wow, it seems that you're right man! 1. clearProps works with FF 25 2. I have VM with XP, tested on FF20, everything works fine without clearProps 3. This time it was not pie strangely So, would you recommend to keep clearProps as a good practice anyway, or just beat it (as it appears to be only in 25)? (i mean, wouldn't it hurt or slowdown anyhow to use clearProps?) P.S. Problem about clicking is still open, i feel like maybe my logic is faulty...

Got some problems. http://codepen.io/failure13/pen/LwCgt Here's pen, in codepen everything is fine, but when i test in Firefox 25 got this strange little margin: Strange thing about it, is that it comes only between 1st and 2nd menu button, between other there are none, if i delete gsap lines from js code, everything is back to normal...So is this known bug, or i'm doing something wrong? And also i got this problem, which is almost impossible to reproduce in codepen (since when you press on link page disappeare), but problem is like this, when you press links too fast, you can actually visually select 2 or 3 menu items at once, like this: Is there a way to avoid it in my case?

GreenSock Well, i don't do this insane task for client of course (if i would get such work right now, i would either say 'we go with flash or no'), i try to do this at first place for myself and other designers who want to go suciide after seeing real picture of web-typography And for me it was logical to go for someone who achived something very close, but with totally different aim... Well, anyway, i understood you perfectly, no problem man, and thanks for all the help anyway If i'll manage to create this manual typography tool someday, i'll share! P.S. Maybe you should also think about it, i mean to make superlimited free version of SplitText, for example call it SplitTextLite. which would serve ONLY as manual typography fixer, and would do absolutely nothing except x and y position of each single letter? I think this would save a lot of people around the globe, since TweenLite engine is very good for this task and can do this very fast and without a lot of pain and issues

jonathan Yes man, i know... Like i said before, i absolutely would love to use it! But i absolutely don't have any money right now + i absolutely don't have patience about all existing typograhical crossbrowser issues, this drives me nuts for months For now i don't need all the fancy stuff really, just split those letter and position them optically, i.e. doing all the hard work thx to idiotic different text-renering schemes between browsers / OS. Kerning.js and lettering.js ain't no options either, coz they're very very limited, especially about older browsers. I guess the only good decision in whole www about typography was Opera moving for webkit, at least one problem less, but this haven't made it easier to make webkit look somewhat adequate on Win 7 compared to Firefox and IE10 ClearType, metrics and kerning.. It just can't get out of my head really, the most important thing in whole design - typography, how you get information, doesn't stay same in all browsers, and i mean with all the hacks and tricks without .js you can made it a little better, but far from pixel perfect, and by pixel perfect i don't mean ideal here, i mean at least variation from normal to less normal, not from normal to freaking-crazy-breaking-everything metrics.. So for now i can fix font-weight problem, but i stuck here with horizontal metrics right on the way to the win!

jonathan Hell, sorry man, that's what i needed to do long time ago! Here i come up with simple example: http://codepen.io/failure13/pen/HFdgk God, now that's real shame...Sometimes i wonder who make broswer's font rendering engines... Letter spacing is exactly what i'm about to fix now but as you know it's absolutely not same as kerning (the idea is to turn off every possible shiting like kerning or ligatures, to make something like optical metering, or at least somewhat equal in all browsers, with help of GSAP in fixing actual letter space), i use CSS in conjuction with js to fix spacing issues, since idiotic webkit engine rounds any letter spacing value :\ So having GSAP's x or marginLeft of each letter really helps here, problems are with reg exp and formulas that divide content... jamiejefferson Yep, i get what you mean, but it doesn't seem to work... To be honest i'm completely lost with all this ways now guys At my pen h1 seems to work as it actually should, but i can't understand how to exclude all tags from spanning, and span only real content like letters spaces and basically everything except tags, you can see this formula in action with h2, it renders <br/> tags as html.. I slammed whole google with questions on subject without a lot of luck. There are some advices about using some html parsers, but this is even more darker wood for me for now :\ What about this new tryout formula in paragraph, it seems to trick me in the first place, it actually shift whole div of course, it's easy to check with bigger negative values of margin, but good side of this formula is that it seems to leave html tags alone, so if i could find my vay of spanning each here in this formula - i guess that would be it...

jonathan Well...Thx for info background, now i finally understood why it happens! But it haven't made my life a lot easier about what i'm up to though, coz with block and inline-block type there are even more problems arise..)) Anyway, now i guess i found good way...Not sure if it's the fastest though. for (var i=0, len=hd4.text().length; i<len; i++) { TweenLite.to(hd4[i], 1, {marginLeft: -0.6, color:'#F09500'}); } One trouble still bother me, when i apply such patter it actually works exactly as i want visually, but throws an error in chrome: Even when i apply it to header or paragraph without any tags like <br/> or <b> etc, only plain text... Any ideas? P.S. oh and there is unrelated to gs question, does anyone know how to forcefully turn off kerning in Chrome? I managed to do this even in Safari with -webkit-font-feature-settings: "kern" 0, "liga" 0; But Chrome seems don't even want to hear about it.

Thank you Carl, you helped a lot! Wow...that hurt! How about Chrome 31 and Firefox 25? And also, this is only <span> specific? So if i'll use any custom <div> it should work for every browser?

jonathan My bad, it was hd2 in all cases Just when i copied it here from different places for some reason forgot to change var, so it should be: var hd2 = $('h2'); // WORK TweenLite.to(hd2, 0, {x: 1}); // DOES NOT WORK hd2.html(hd2.html().replace(/./g, '<span>$&</span>')); TweenLite.to(hd2.find('span'),0, {x: 1}); And still doesn't work.. Which is weird, coz for example: hd2.html(hd2.html().replace(/./g, '<span>$&</span>')); TweenLite.to(hd2.find('span'),0, {marginLeft: 1}); work....hmm I don't get it :\