Why does this animation not work?

Question

jspence29 0 Junior Poster in Training

13 Years Ago

I am trying to get an animation, like the one at http://tympanus.net/Tutorials/TypographyEffects/index6.html
But for some reason it is not animating at all. Is there any fix for this? My code is

<DOCTYPE html>
<html>
<head>
<title> Saturday Night Live </title>
<style>

body {
background-image: url('http://images.fanpop.com/images/image_uploads/SNL-Wallpaper-saturday-night-live-784022_1024_768.jpg');
background-size: cover;
}

.letter-container h2 a{
text-align: justify;
float: right;
margin-right: 100px;
font-size: 130px;
line-height: 160px;
display: block;
padding-bottom: 30px;
color: #fff;
cursor:default;
text-decoration: none;
}
.letter-container h2 a span {
color: #000;
opacity: 1;
text-decoration: none;
transition: all 0.3s linear;
animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:nth-child(1) {
    animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
    animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
    animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(4) {
    animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
    animation-delay: 0.4s;
}
.letter-container h2 a span:nth-child(6) {
    animation-delay: 0.5s;
}
.letter-container h2 a span:nth-child(7) {
    animation-delay: 0.8s;
}
.letter-container h2 a span:nth-child(8) {
    animation-delay: 0.9s;
} 
.letter-container h2 a span:nth-child(9) {
    animation-delay: 0.10s;
}
.letter-container h2 a span:nth-child(10) {
    animation-delay: 0.11s;
} 
.letter-container h2 a span:nth-child(11) {
    animation-delay: 0.12s;
}
.letter-container h2 a span:nth-child(12) {
    animation-delay: 0.13s;
} 
.letter-container h2 a span:nth-child(13) {
    animation-delay: 0.14s;
}
.letter-container h2 a span:nth-child(14) {
    animation-delay: 0.15s;
} 
.letter-container h2 a span:nth-child(15) {
    animation-delay: 0.16s;
}
.letter-container h2 a span:nth-child(16) {
    animation-delay: 0.17s;
} 
.letter-container h2 a span:nth-child(17) {
    animation-delay: 0.18s;
}
@keyframes sharpen {
 0% {
 opacity: 0;
 text-shadow: 0px 0px 100px #fff;
 color: transparent;
 }
 90% {
 opacity: 0.9;
 text-shadow: 0px 0px 10px #fff;
 color: transparent;
 }
 100% {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-moz-keyframes sharpen {
 0% {
 opacity: 0;
 text-shadow: 0px 0px 100px #fff;
 color: transparent;
 }
 90% {
 opacity: 0.9;
 text-shadow: 0px 0px 10px #fff;
 color: transparent;
 }
 100% {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-webkit-keyframes sharpen {
 0% {
 opacity: 0;
 text-shadow: 0px 0px 100px #fff;
 color: transparent;
 }
 90% {
 opacity: 0.9;
 text-shadow: 0px 0px 10px #fff;
 color: transparent;
 }
 100% {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-ms-keyframes sharpen {
 0% {
 opacity: 0;
 text-shadow: 0px 0px 100px #fff;
 color: transparent;
 }
 90% {
 opacity: 0.9;
 text-shadow: 0px 0px 10px #fff;
 color: transparent;
 }
 100% {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
</style>
</head>
<body>

<div id="letter-container" class="letter-container">
    <h2><a href="#"><font color="red">S</font>aturday <br/> <font color="red">N</font>ight <br/> <font color="red">L</font>ive</a></h2>
</div>
</body>
</html>

Sorry for it being so long, most of it is just repetitive. Thank you!

html-css web-design

Edited 13 Years Ago by jspence29

3 Contributors
7 Replies
234 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by jspence29

Dani AI

Generated 7 Months Ago

Brief diagnosis and reliable fixes

The effect depends on two things: (a) each character must be wrapped in its own <span> (that is done by a small jQuery plugin such as lettering.js) and (b) those spans must have the CSS animation applied. If the plugin never runs (or runs in the wrong order), the spans never exist and the CSS has nothing to animate. Two other common, easy-to-miss problems in this thread were a malformed doctype and inline/deprecated tags that interfere with the lettering step.

Key checks and corrective steps

Ensure a valid HTML5 doctype is the first line: <!DOCTYPE html>. An incorrect doctype can force quirks-mode rendering and break expected CSS behavior.
Load order: jQuery must load first, then the lettering plugin, then the initialization that calls the plugin. Scripts that create/remove DOM nodes should run after the DOM is ready or be placed just before </body>. Example ordering (use local or properly hosted files, not hotlinked copies on someone else’s tutorial site):

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.lettering.js"></script>
<script>
  $(function(){
    $('.letter-container h2 a').lettering();
    // optionally add a class to trigger/restart animations
  });
</script>

Avoid deprecated inline tags like <font> and lots of <br/> inside the element being letter-wrapped. Lettering plugins work best on plain text nodes; styling and line breaks should be done with CSS so nth-child selectors on generated spans work predictably.
Debugging: open DevTools → Console/Network. Look for 404s or errors such as Uncaught ReferenceError: $ is not defined or Uncaught TypeError: $(...).lettering is not a function — those pinpoint missing or mis-ordered scripts. Inspect the DOM to confirm the spans exist.

Notes on browser support and thread context

CSS3 animations don’t require jQuery by themselves; the jQuery dependency here is only for creating the per-letter spans. Vendor-prefixed animation properties may be needed for very old browsers. The working resolution reported by matches @LastMitch’s advice: host the plugin correctly and ensure proper load order; ’s point about the jQuery dependency is relevant when a JS plugin is used to build the animated markup.

All 7 Replies

Member #949455

13 Years Ago

Why does this animation not work?

I don't see you connecting to the JQUERY file in order for this to work?

It should look like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

It should be part of your code without this the animation won't work

Edited 13 Years Ago by Member #949455 because: grammer

Member #949455

13 Years Ago

Do you mean all the javascript? because I put it all there and there was no change

This can't be a school project right?

Give me a good reason why you link this file from their website and it should be link to your OWN website:

<script type="text/javascript" src="tympanus.net/Tutorials/TypographyEffects/js/jquery.lettering.js"></script>

This file: jquery.lettering.js should be on your server not linking to their website.

<off topic> You know I realize you been posting alot of threads and questions it would be nice if you can click Mark Question Solve on the bottom left corner so the thread is close and solve so noone can add stuff to it. </off topic>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

designershiv 1 Newbie Poster · Answer 1 · 2012-12-04T05:29:30+00:00

Hi ,
this is css3, so need to have jquery link

jspence29 0 Junior Poster in Training · Answer 2 · 2012-12-04T21:30:37+00:00

Look at my website I added that bit, and another jquery file. It works in this jsfiddle http://jsfiddle.net/JonMoore/b6Wfg/1/ Yet for a reason that eludes me it odesn't in my website please help!

Member #949455 · Answer 3 · 2012-12-05T01:08:11+00:00

Yet for a reason that eludes me it odesn't in my website please help!

You need to put the javascript before the body another words it should be in the header not in body.

jspence29 0 Junior Poster in Training · Answer 4 · 2012-12-05T01:17:49+00:00

Do you mean all the javascript? because I put it all there and there was no change

jspence29 0 Junior Poster in Training · Answer 5 · 2012-12-05T19:06:59+00:00

Thank you @LastMitch and I just fixed my issue, I followed you advice, and I changed the file, and I also moved the code to the bottom of the body, and it worked!

Why does this animation not work?

Dani AI

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers