failure13

jonathan Yep, this idea looks interesting, but also pretty complex for typography tasks... Not sure, maybe it's a good idea to try it out like apply such pattern and then change only distance and color via variable for each particular text case. Maybe something like glow should be more simple? I mean not really native css effects, more like gsap, js special (if there are) to make it apply consistent over different browsers.. UPDATE: Really cool pen! With class it's a lot easier! Now there is another problem i came across... var hd4 = $('h4'); // 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}); Here i used principles of Chrysto's code in "DOES NOT WORK", but as far as i understand it should apply "x: 1" to each separate span (letter in my case), why it doesn't happen? Like it happen with whole h2 in "WORK" section? The idea here is to distribute each letter on 'x: x' pixels or ems, to fake letter-spacing

TweenLite.to($('#title'), 0, {fontSize: '1.89em'}); Is there a way to specify sometthing like "i want fontSize -0.05em than it's current fontSize"?

jonathan That's very interesting, i've already read about spoofing of useragent before, but couldn't find the good code using 'window' that would detect all browsers before, your chromium example works good though! rhernando Thx man, i've already seen those example before, thing is that that i like Chrysto's example, but haven't figured out way of splitting full-paragraphs, it seems that now regexpressions in his example include all html tags like <b>, <br> etc, is there any cool regexp to include everything except those html tags? Jacl, Carl Hopefully one day you'll make it Thing is, that for my particular case, i'm in this territory for fixing typography issues of webkit based browsers for Windows 7,8 Safari, Chrome etc, coz they render completely different metrics, weight, letter spacing etc And this drives me absolutely crazy! So now i'm tring to fix weight... Maybe there is another native way of making text stroke-like with rgba values in TweenMax?

Oh cool! But anyway it would be better if Jack can find more native-like solution! One more question, is there any simple jQuerry or JavaScript way of splitting each letter in whole div with it's own spans? I would love to check out SplitText of course, but right now don't have a lot of money to become club member... Hopefully there is some simple way, coz i just want to make something like custom kerning. nothing fancy like animation or stuff... Not really happy with stuff like kerning.js, it's pretty limited, so would love to know how to split

So, my idea would be something like this, but i'm not sure it's possible or if i'm using right gs sintax... if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){ // h4 TweenLite.to($('body').find('h4'), 0, {y: 1, css:{textStroke: '3px rgba(0, 0, 0, 0.2)'}}); } Any help? P.S. Yes i'm crazy enough to try using gs as fast typography tool

Goddammit, "." instead of ":"! Thx for saving my time! Syntax again, i seriously need to concentrate...

Hmmm...Got question, why exactly same task doesn't apply here for button? http://codepen.io/failure13/pen/ijEIh

Oh lol about } My bad! Nice solution, pretty clean, thank you

That's awesome to have such ability, thank you! Too bad there's note about little speed downgrade, wonder how much it is, coz using this classsName property is waay too handy! But i can't understand how can i target in my case active or hover class (pseudo-class), by logic this should work, but it's not: http://codepen.io/failure13/pen/ijEIh

http://cdpn.io/ijEIh http://codepen.io/failure13/pen/ijEIh All right, now i have menu, stylized in CSS default and hoover states, and i want to keep it that way even with js, to ensure that user will not see some non-sense if js disabled, so now i want to animate my buttons, make duration slower and sexier etc. Questions are: 1. Is there any easy way with GSAP JS, to just specify duration and ease of what should be done between default and hoover buttons states, and rest data will be taken directly from CSS? note: if this question could be solved, then rest of questions should fall off. 2. How to get rid of this effect from my example, which cause after page loading, at first time you hover - fires usual CSS without transitions and ease, and only then start to look as i wrote it in .js file? 3. For example i want to change gradient, border radius or box shadow with GSAP JS, on hoover state, which has all of those broswer specific prefixes (and must have them, if i want my project to work everywhere), how should i talk GSAP JS with such parameters, in which sintax form?

Yep, i already know Carl, but this doesn't make it work any better in terms of .pie or web-fonts, so i don't coimpletely belive to what i see in codepen, even though it's handy to show some simple stuff... But do it unsupport even THIS? TweenLite.to($(this).find('h3'), 2, {width: '60%', ease: Cubic.easeOut}); Just dinamically changing width...? cmon, i think there's somehow javascript ain't working, it should work at least somehow, but even simple color changes doesn't work there, and it's the only relatively old browser that have this effect, there should be something more about it...

I don't know, it seems that pie doesn't work at all in codepen for some reason (url is valid...hmm) Locally or on host it work. Codepen ain't ideal either, i mean, it doesn't render @font-face for example, so... I'll try their .js version wait a minute... No, .js don't work through codepen also, but in all real IE browsers it works It's hard to debug, dammit :\

That's just what i thought, html5, but take a look, if i've correncted those errors with selectors, such code still doesn't work in IE6: http://codepen.io/failure13/pen/LwCgt I mean rotation

You mean like this? $("#circle").css("left", "200px"); That works, yes! No probs about PIE, but i strongly suggest you to check it out, since it's the only working solution for modern CSS3 features, crossbrowser .png with alpha (working even on oldest crap like IE 5.5) and lots more, and it really works (at least stand alone). They've started not too long ago, so i think it's ok to have 100 open issues For those who need all modern stuff to work on IE CSS PIE is essential, since they have it all at once, and it works, unlike most of other solutions for old IEs.. What about Opera 9 & 10 - i don't know...It just doesn't work at all, i mean, nothing that i wrote in .js looks like .js ain't working at all. Opera 11 and 12 is working just fine. I've checked .js in latest firefox, it says: [23:40:05.274] Error: Permission denied to access property 'toString' [23:40:05.716] Error: Permission denied to access property 'toString' [23:40:48.896] Error: Permission denied to access property 'toString' [23:40:49.466] Error: Permission denied to access property 'toString' Will create codepen a bit later, i've sent you in pm my files, so you can take a look if you have time.

Ah, i see the problem in my case, i've used CSS PIE 2.0 beta to draw circle with code and background texture, it sucsessfuly draws in IE6, but doesn't rotate #circle { margin: auto; padding: 0px; width: 200px; height: 200px; position: relative; background: #353535 url(images/circle.jpg); border: 2px solid #FFFFFF; /* BORDER RADIUS */ -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; behavior: url(js/libs/PIE-2.0b1/PIE.htc); } Any idea, if PIE and GSAP JS could work toogether? Also, i've noticed that in Opera 9 and 10 nothing works, i mean all of this .js code doesn't animate, as if js wouldn't work at all...But in settings of Opera js active, anything specific i should add to my .js ? // this will run after the page loaded $(document).ready(function() { // textareas behavior $('textarea, .inputSingle').focus(function() { if (this.value == this.defaultValue) { this.value = ''; } }); $('textarea, .inputSingle').blur(function() { if (this.value == '') { this.value = this.defaultValue; } }); // menu buttons animation $('ul#menu li a').hover(function() { TweenLite.to(this, 0.35, {css:{backgroundColor: '#333333', color: '#FFFFFF'}}); }, function() { TweenLite.to(this, 0.35, {css:{backgroundColor: '#38ba9d', color: '#000000'}}); }); // content hover $('.content').hover(function() { TweenLite.to($(this).find('h3'), 0.5, {color: '#21a7bf'}); TweenLite.to($(this).find('h3'), 2, {width: '60%', ease: Cubic.easeOut}); }, function() { TweenLite.to($(this).find('h3'), 0.5, {color: '#353535'}); TweenLite.to($(this).find('h3'), 2, {width: '99%', ease: Cubic.easeOut}); }); TweenMax.to(circle, 8, {rotation: 360, repeat: -1, ease: Linear.easeNone}); });

Yeah Carl, it's rotating in IE6! What's the big secret?

Jack, i've just installed legit Windows XP SP2 with IE6 on Oracle VM Virtual Box, and i don't see rotation with this code, as in IEtester... TweenMax.to(circle, 8, {rotation: 360, repeat: -1, ease: Linear.easeNone}); Any thoughts why?

Yeah, i guess it is too complicated to use those frameworks for such a simple task. Heh, that's the main trouble with it, even if they are for some moment - strong backwards compatibility will still be needed for 70% of all web-projects, and god damn them, IE 6-8 and Opera...What can i say. I was trying to mimic this effect creating own .swg filter, and it work in lot of broswers, but i couldn't control ease or time of this effect, which i would like to control, implementation looks like this: filter: url(js/filters.svg#desaturate); filter: gray; /* IE 6-9 */ -webkit-filter: grayscale(1); /* Old WebKit */ -webkit-filter: grayscale(100%); /* Google Chrome & Safari 6+ */ -moz-filter: grayscale(100%); /* Firefox 3.5+ */ -ms-filter: grayscale(100%); -o-filter: grayscale(100%); /* Opera */ And filter like this: <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> <filter id="desaturate"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg>

If i understood you correctly: 1. I need to load EaselJS (yet another library... : / ) <script src="js/libs/easeljs-0.6.1.min.js" type="text/javascript"></script> 2. And than this should work: TweenLite.to(img, 0.6, {easel:{colorFilter:{saturation: 0}}}); But it don't...Where's my mistake? God, i love to hear that 'yet'! This would make our life much easier!

Ok, i'll try to use VM with IE collection then, thx for advice! But, would you recommend something like portable browsers to test other browsers old and new versions, like Opera or Safari, Chrome? Oh, and also i would like to know, is there any Cross-browser working color -matrix stuff with GSAP JS? For example img desaturation like here: http://dev.artutkin.ru/desaturate/example.html

Well, i mean i've done: TweenMax.to(circle, 8, {rotation: 360, repeat: -1, ease: Linear.easeNone}); But this doesn't work in IE 6-8, at least according to IETester. It works in Firefox and Safari, in old Opera like 9 it doesn't..

Is there any way to make rotation command inside TweenMax cross-browser, include IE 6-8?

Perfect, thank you Jamie!

Ok, i perfectly understood this example, but i don't understand in this case: html <div class="content"> <h3>IDM</h3> <img src="pictures/001.jpg" class="picture" alt="BrainDance"/> </div> <div class="content"> <h3>Venetian Snares</h3> <img src="pictures/002.jpg" class="picture" alt="Venetian Snares"/> </div> <div class="content"> <h3>APHEX TWIN</h3> <img src="pictures/003.jpg" class="picture" alt="Aphex Twin"/> </div> What i want to do is when i hoover one of the .content elements, i want to change color specifically only of this selected .content element's h3, and i still don't understand how i can specify such task with GSAP JS... P.S. I really love js syntax that you've posted above, but it doesn't look like jQuery, so i got question, can i code in this fashion (which look a lot like as3) and still be compattible for all browsers, just as if i would use all-jQuery syntax, except tweens itself? If i could use function constructions like this, this could help me a lot to understand principles and don't think about new syntax stuff too much))

Ok i get it, but not completely. For example, here: $(document).ready(function() { // this will run after the page loaded var test = $(".content"); test.hover(function() { TweenLite.to(".content h3", 0.5, {color: "#21a7bf"}); }, function() { TweenLite.to(".content h3", 0.5, {color: "#353535"}); }); }); Logically it should animate selected .content's h3 color, when i hover the mouse . Well it does, but not just for selected, it do this for all h3 in all .content divs... I feel that i should do something like this + ".content h3", but it doesn't work this way, can't find nothing like that in GSAP JS docs... P.S. Thx for another nice resourse! And btw, i love your blog, awesome stuff in there, especially text-animation examples!