When we added CSS filter effects to Tumult Hype, we knew it would open up a world of possibilities for animators. An un-animated CSS Filter effect is one thing, but when animated, the CSS Filters bring a new richness to web content. Blurring, saturating, and hue shifting images, text, or elements (and even videos!) brings a new dimension to animations. Think lighting effects, indicating motion with blurring, and setting the color temperature for images. Technically, Tumult Hype is setting CSS properties on your elements:

#YourElement {
  -webkit-filter:saturate(5) hue-rotate(500deg) sepia(0.7) contrast(1.5) brightness(.9);
}

… but doing so up to 60 times a second at a rate you define. Even though it’s a cutting-edge feature that currently works in Webkit based browsers, it’s ready for prime time: Reuters has added subtle blurs to their recent infographic on the Boeing’s 787 Dreamliner.  In the document below, we show what filter effects do when applied to photos, how they can augment infographics, and a few other fun examples.We hope these inspire you to play around with all the CSS filter effects! Click the image below to open it up: 

If you’d like to examine some of the code or techniques used in this document, grab the original .hype file here.

Environmental Effects

Want more? Here’s a mesmerizing mandala produced in Tumult Hype by one of our more creative users who goes by the name Big Poppa E (alternate mandala link here). His entire site is worth a look; it’s a mystical tour into his work and life through a Myst-like system of rooms chock full of sound and lighting effects. Check it out!

The possibilities are endless. Go have fun!