GSAP JS: Edit for Fernando

GSAP JS: Edit for Fernando.markdown

GSAP JS: Edit for Fernando

Simple demo showing animation of elements with multiple text-shadows : http:www.greensock.com/gsap-js/

special thanks to Daniel Riemer who created the text-shadow style and original pen :

http://codepen.io/zitrusfrisch

A Pen by Wilbur on CodePen.

License.

index.html

<h2>Hallo Daar</h2>
<h1>Fernando!</h1>

script.js

var tl = new TimelineMax({repeat:6, repeatDelay:1, yoyo:true});
tl.staggerTo("h2, h1", 0.8, {className:"+=superShadow", top:"-=30px", ease:Power1.easeIn}, "0.3", "start")

//animation powered by GSAP JS
//http:www.greensock.com/gsap-js/
  



/*
special thanks to Daniel Riemer who created the text-shadow style and original pen

http://codepen.io/zitrusfrisch

*/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.2/TweenMax.min.js"></script>

style.css

body { 
  font-family: 'Verdana', Arial, sans-serif; 
  background: #becccc; 
  text-transform: uppercase; 
  color: #fff; 
  text-align: center; 
  letter-spacing: -3px; 
  padding:50px;
}

h1 {font-size:6em;}
h2 {font-size:4em;line-height:.2em;position:relative;}

/*
text-shadow originated from: http://codepen.io/zitrusfrisch
*/
.superShadow {
  text-shadow:     0 1px 0 hsl(174,5%,80%),
	                 0 2px 0 hsl(174,5%,75%),
	                 0 3px 0 hsl(174,5%,70%),
	                 0 4px 0 hsl(174,5%,66%),
	                 0 5px 0 hsl(174,5%,64%),
	                 0 6px 0 hsl(174,5%,62%),
	                 0 7px 0 hsl(174,5%,61%),
	                 0 8px 0 hsl(174,5%,60%),
	
	                 0 0 5px rgba(0,0,0,.05),
	                0 1px 3px rgba(0,0,0,.2),
	                0 3px 5px rgba(0,0,0,.2),
	               0 5px 10px rgba(0,0,0,.2),
	              0 10px 10px rgba(0,0,0,.2),
	              0 20px 20px rgba(0,0,0,.3);
}