Jump to content
Search Community

Adding text-stroke via TweenLite

failure13 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 :D

Link to comment
Share on other sites

Hi,

 

I'm not sure why it doesn't work, perhaps because the lack of browser support has not been included in the CSSPlugin, Carl or Jack are more suited to answer that.

 

In the mean time here' a workaround:

var obj = {stroke:0},
    elements = $("h4");

$("#button").click(function()
{
  TweenLite.to(obj, 1, {stroke:3, onUpdate:updateStroke});
});

function updateStroke()
{
  elements.css('-webkit-text-stroke',obj.stroke+'px rgba(0, 0, 0, 0.2)');
}

Rodrigo.

  • Like 1
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Hi,

 

Two users tackle this before the SplitText was ported to JS, Michael Dobekidis (Michael71) and Chrysto Panayotov(Chrysto), you can check their tutorials here:

 

Michael71

http://nightlycoding.com/index.php/2013/02/text-effects-with-timelinemax/

Repository:

http://netgfx.github.com/SplitText/

 

Chrysto:

http://blog.bassta.bg/2013/05/text-animation-with-tweenmax/

 

Also you might want to take a shot at the SplitText contest, you could win a Club membership:

http://www.greensock.com/splittext/

 

https://twitter.com/greensock/statuses/407972253020602368

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Yeah, currently text-stroke is not supported by any IE even up to 11 and FireFox seems to be behind as well.

 

CSSPlugin does not yet have text-stroke support so right now Rodrigo's suggestion is excellent.

 

As the browser support and user demand increase I'm sure it will end up in CSSPlugin.

 

Thanks for the suggestion, we'll definitely keep it in mind.

 

---

 

FYI: Entering the contest is a VERY good idea.

Link to comment
Share on other sites

Hello failure13 .. Just a side note ...

 

When checking if the browser is Chromium based its best to use feature or object property detection versus checking the user agent. This is because the user agent can be spoofed.

 

You had this:

// user agent can be spoofed
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
        
}

To make sure you check definitely for Chromium based browser, try this:

// check if Chromium based browser
var isChromium = window.chrome;
if(isChromium === true) {
      // is chromium based browser
} else { 
      // not chromium based browser
}

// check if Google Chrome
var isChromium = window.chrome,
    vendorName = window.navigator.vendor;
if(isChromium === true && vendorName === "Google Inc.") {
      // is Google chrome 
} else { 
      // not Google chrome 
}

// check if Opera 18 and above
var isChromium = window.chrome,    
    vendorName = window.navigator.vendor;
if(isChromium === true && vendorName === "Opera Software ASA") {      
      // is Opera 18 or above
} else {      
      // not Opera 18 or above
}

Hope this helps! :)

  • Like 1
Link to comment
Share on other sites

Yeah, like Carl said, we really try to avoid non-standard features that don't work across the major browsers. Doing so could cause a lot of headaches, especially if the "standards" evolve before they get approved by the standards bodies. 

 

If/When text-stroke becomes standard among the major players, we'd love to add support for it as well. 

 

http://caniuse.com/text-stroke

  • Like 1
Link to comment
Share on other sites

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! :D

 

So now i'm tring to fix weight...

Maybe there is another native way of making text stroke-like with rgba values in TweenMax?

Link to comment
Share on other sites

Hello fellow GreenSockers..

Instead of using text-stroke that is still not fully supported in browsers.. why not use text-shadow to fake text-stroke!

http://caniuse.com/css-textshadow
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

See this mimicking text-stroke with multiple text-shadows in CSS

See the Pen qKAft by jonathan (@jonathan) on CodePen



Then use GSAP to animate multiple text-shadows since its supported better than text-stroke

Hope this gives some ideas :)

 

UPDATE:

 

Just found this text-shadow example on Greensock codepen, that animates by classname that might be helpful:

 

See the Pen AznEH by GreenSock (@GreenSock) on CodePen

 

:D

Link to comment
Share on other sites

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

Link to comment
Share on other sites

jonathan

My bad, it was hd2 in all cases :D

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 :\

Link to comment
Share on other sites

You may be having problems as some browsers ignore transforms on inline elements (like spans)

 

http://stackoverflow.com/questions/4919963/css3-transform-not-working

 

----

 

Previously you asked

 

Is there a way to specify sometthing like "i want fontSize -0.05em than it's current fontSize"?

 

 

Yes, use relative value notation

 

//set
TweenLite.set("#bigger", {fontSize:"+=0.5em"});
//tweened
TweenLite.to("#smaller", 1, {fontSize:"-=0.5em"});
  • Like 2
Link to comment
Share on other sites

Thank you Carl, you helped a lot! :)

 

 

You may be having problems as some browsers ignore transforms on inline elements (like spans)

 

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?

Link to comment
Share on other sites

Since a <span> is a inline-level element, than you would need to set the span's CSS to display property to block or inline-block to make it a block-level element, otherwise use a <div> tag or a tag which is a block-level element by default.

 

You can read more about inline and block level elements here:

 

http://www.css-101.org/inline-level-elements/

http://www.css-101.org/block-level-elements/

 

https://developer.mozilla.org/en-US/docs/HTML/Inline_elements

https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

 

:)

  • Like 3
Link to comment
Share on other sites

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:

 

Uncaught Cannot tween a null target.

 

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.

Link to comment
Share on other sites

presuming your element object is a jQuery object and not a DOM object. Instead of trying to reference that DOM object why not just use jQuery's eq()  (zero based index)

 

http://api.jquery.com/eq/

for (var i=0, len=hd4.text().length; i<len; i++) {
        TweenLite.to(hd4.eq(i), 1, {marginLeft: -0.6, color:'#F09500'});
}
  • Is the hd4 variable a reference to a jQuery object or a DOM object?

if possible can you setup a

See the Pen by pen (@pen) on CodePen

or jsfiddle so we can see your code in context of what hd4 references..

 

regarding your kerning in chrome.. looks like there is a bug in Chromium about Font kerning incorrectly turned on when setting other font features - Issue 165643:

 

http://code.google.com/p/chromium/issues/detail?id=165643

 

best thing to do is use the CSS property letter-spacing to control the space between letters

 

https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

 

or you can use the CSS text-rendering

 

https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

#element {
      text-rendering: optimizeLegibility;
}

// or use geometricPrecision

#element {
    text-rendering: geometricPrecision;
}


Hope this helps :)

  • Like 1
Link to comment
Share on other sites

My guess on that loop is that you are calculating a different length to what you are iterating i.e.

 

Let's say hd4 is a collection of 2 elements:

Element one has text = "hello".

Element two has text = "bye".

 

You have set len=hd4.text().length in your loop. With the above data, len = 5 (.text() returns the text of the first element of the collection, in this case "hello").

 

You are incrementing i on each loop, and inside the loop you are accessing hd4. With the above data this will work twice, and then every loop afterwards will return undefined. Hence, the Uncaught Cannot tween a null target error.

 

Try len=hd4.length in the loop.

  • Like 2
Link to comment
Share on other sites

jonathan

 


 

if possible can you setup a

See the Pen by pen (@pen) on CodePen

or jsfiddle so we can see your code in context of what hd4 references..

Hell, sorry man, that's what i needed to do long time ago! :D

 

Here i come up with simple example:

See the Pen HFdgk by failure13 (@failure13) on CodePen

 


 

regarding your kerning in chrome.. looks like there is a bug in Chromium about Font kerning incorrectly turned on when setting other font features - Issue 165643:

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...

Link to comment
Share on other sites

Is there a reason you dont want to use SplitText Plugin as Rodrigo advised above... and let it do all the heavy lifting in splitting the text and keeping the text in place.

 

Here is the SplitText Plugin page with a awesome tut by Carl:

 

http://www.greensock.com/splittext/

 

Also checkout the SplitText Docs:

 

http://api.greensock.com/js/com/greensock/utils/SplitText.html

 

:)

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

I'm not sure this is the best place for a question like this. It feels a little weird after having put a bunch of effort into building SplitText to have you come to the GreenSock forums and basically ask "can you tell me how to do what SplitText does so that I don't have to pay you any money to buy it?"  :oops:

 

I totally understand, though, that you've got limited funds. I don't fault you for that at all. Been there myself, and I really dislike paying for software in general. I'd rather just build it myself usually, but sometimes it's far most cost-effective to just go with a solution from someone else who has burned a bunch of hours wrestling through the issue already. Maybe if you're doing this for a client (and burning a lot of hours on it), maybe consider just building the cost into what you charge the client. That may end up saving them a lot of money compared to paying you by the hour to manually experiment and try to find solutions yourself. Then again, maybe you don't have that option. I'm just pointing out that this thread seems like it doesn't belong in the GreenSock forums at this point. 

  • Like 1
Link to comment
Share on other sites

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 :D

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 :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...