Animated Ad with Greensock SplitText

Hello again, so I was asked to create an impressive Ad banner for a server company (a quite good one). Since most of the animation would involve letters I thought of the Greensock SplitText plugin.
And the result was extremely nice, it received over 1000 views on codepen in under 3 days.

Here is the animation in action, as always explained code follows.

See the Pen SplitText – Massive grid animation by Michael Dobekidis (@netgfx) on CodePen.

Find more info about SplitText plugin here:
http://www.greensock.com/splittext/

Now let us break the code donw a bit and see what is goind on.

Markup, HTML


<link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>

  
<div id="container">
  <div id="quote">The only server you'll ever need</div>
  <div id="emphasis">MassiveGRID</div>
</div>

Things are simple here, just importing some fonts and adding the main quote and some text that will be our main focus.


Some CSS sauce


body{
  font-family: Asap, Arial, Helvetica, sans-serif;
  color:white;
  background:black url(http://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
  margin:5% 10% 0 10%;
  overflow:hidden;
}
#demo{
  position:relative;
}

#container {
  top:120px;
  width:100%;
  text-align:center;
  vertical-align:middle;
  display:block;
  position:relative;
}

#quote{
  font-size:26px;
  line-height:44px;
  color:#dedede;
  text-align:center;
  opacity:0;
}

#emphasis {
  font-size:42px;
  line-height:45px;
  color:#f1f1f1;
  text-align:center;
  opacity:0;
  padding-top:10px;
}

button{
  padding:10px;
  margin:20px 0;
}

#nav {
  padding-bottom:20px;
}

.word{
  color:"##C3C3C6";
  text-transform: uppercase;
  visibility:hidden;
}

.char {
  color:#f1f1f1;
  text-transform: uppercase;
  visibility:hidden;
}

#instructions {
  visibility:hidden;
}

Some basic styling for our letters and separate characters that will be produced after we apply the SplitText functionality. We also make the letters transparent so we can animated their opacity for extra effect.


Spliting Text


var split;
var emphasis;
$(document).ready(function(){
  
  split = new SplitText("#quote", {type:"words", wordsClass:"word"});
  emphasis = new SplitText("#emphasis", {type:"chars", charsClass:"char"});
  
  TweenMax.set(".word", {autoAlpha:0});
  TweenMax.staggerFromTo( split.words, 0.4, {autoAlpha:0, scale:5, onStart:function(){
    $("#quote").css({"opacity":1});
    window.console.log(" >>> ", $("#quote").css("opacity"));
  }}, {autoAlpha:1, scale:1}, 0.3, playEmphasis );
  
});

function playEmphasis() {
  TweenMax.staggerFromTo( emphasis.chars, 0.5, {autoAlpha:0, scale:5, onStart:function(){
    $("#emphasis").css("opacity",1);
  }}, {autoAlpha:1, scale:1}, 0.2, function(){
    emphasis.revert();
    TweenMax.to($("#emphasis"), 0.2, {color:"#F3BC29", fontSize:50, textDecoration:'underline'});
    $("#emphasis").css("cursor","pointer");
    $("#emphasis").wrap("<a href='http://www.massivegrid.com' target='_blank'></a>");
  });
}

You may think that there isn’t much code here but trust me this is due to the awesomeness of the SplitText plugin, it handles everything for the animator. And this comes from a guy that not while ago wrote his own split text animation library.

So lets see what is happening here. First we apply the split to the main text and the emphasis text, then we make sure to have the main text as trasparent and we animate main text from a scale of 5 (quite big and out of screen) to a scale of 1 (normal) and opacity 1 (non trasparent). After this animation ends we invoke the playEmphasis function which does exactly the same thing for the “emphasis text” but at the end it wraps the text in a a tag for it to become an active link.
Mind the command emphasis.revert() which reverts the splited text into one word so we can manipulate it as a whole.

If you liked this animation or have any questions make sure to commend below.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *