Web Animation using JavaScript: Develop & Design (Develop and Design)

Once you’ve designed all your element animations exactly the way you want them, you can export your work ...

Chapter 5. Animating Text Since textual animation is rarely employed in webpages, using it is an easy wa ...

Preparing text elements for animation with Blast.js The tool of choice for typographic animation is Blast.j ...

<span class=“blast”>Hello</span> <span class=“blast”>World</span> As you can see, ...

In addition to its robustness, Blast provides a high level of accuracy. It doesn’t dumbly split words a ...

Option: Delimiter Blast’s most important option is delimiter, which accepts "character", "word", or "sentence". To ...

Note This option is applicable only to the character and word delimiters. The [delimiter] placeholder represe ...

Option: Tag This option lets you specify the type of element that wraps text parts. The default value is s ...

words into view one at a time, you would subsequently reverse Blast upon completion of the animation. C ...

animation sequence that consists of one text element animating after another. Staggering This is where ...

// When this outward animation is complete, begin the inward animation co ...

Click here to view code image // CSS implementation .blast:nth-child(3) { color: red; } // jQuery implementation ...

"inline"—the default display value for span and anchor elements in particular. The workaround is to set Blast’s ...

var adjustedOpacity = 1 - i/10; element.style.opacity = adjustedOpacity; }); Instead of iterating opacity v ...

Why? Because stylized text is harder to read at a glance than unstylized text. But if you consider ...

Chapter 6. Scalable Vector Graphics Primer Since an in-depth tutorial on Scalable Vector Graphics (SVG ...

here for demonstration purposes, but (as with HTML) it’s considered best practice to specify SVG styling p ...

with solid green. Additionally, the rectangle has a red border with a thickness of 5px. There are many ...

Click here to view code image // Animate an SVG element to a red fill and a black stroke $svgElement.vel ...

Implementation example: Animated logos High-resolution site logos that animate into place upon page lo ...