Text Opacity

[Juc1]

Hi all,

 

Newbie question please - in my codepen the text is gradually revealed from left to right. So far I have put each letter in its own div but is there a way to get this kind of reveal effect without having to break up the word into its individual letters?

 

Thanks... 

See the Pen BNvWXE by Juc1 (@Juc1) on CodePen

[Carl]

If you don't want to create new divs for each letter our SplitText tool can do that for you

 

http://greensock.com/SplitText

 

var t = new SplitText("#text", {type:"chars", charsClass:"staggered-text"})


TweenMax.staggerFrom(t.chars, 0.3, {opacity:0, scale:1.5, rotation:-20, y:20}, 0.2)  

 

http://codepen.io/GreenSock/pen/oXJGqQ

 

 

SplitText is available to Shockingly Green members, which you are eligible to upgrade to. http://greensock.com/club/

[Juc1]

@ Carl ok thanks.

 

By the way the "view demo" and FAQ links don't seem to work.  

 

[Juc1]

Anyway another thing is that the first time a codepen (yours or mine) loads in a new browser the unstyled text appears briefly (ie less than one second) before the animation begins. Do you know what I mean and if so is it possible to stop the unstyled text showing?

 

Thanks...   

[Carl]

I appreciate you reporting the issues but I'm not having any trouble at all with the "view demo" or faq links

http://prntscr.com/7zzrkf

 

tested: Chrome, FireFox, Safari on Mac

 

What browser and OS are you using? (edit: it looks like you are using Chrome)

 

---

 

As for the text flashing in the demo, yes, that is because it takes time for the js to load and execute. There are a few things you can do. Easiest is just hide the text until the js executes using visibility:hidden in your css

 

http://codepen.io/GreenSock/pen/oXJGqQ

 

Also, you could change your html and css so that the parent div is styled (in my demo just apply the font-size to #text). In your demo you were styling each individual character (using .staggered-text) so I wanted to respect that in my demo.

[Juc1]

@ Carl the link problem was in Windows 8 and several browsers - but on a different Windows 8 machine it works fine so the problem must be with my machine.

 

 

Anyway SplitText looks good, thanks...