RHH Foam Systems – spray foam insulation

The spray nozzle at the top of this site is animated, but on a long delay to avoid annoying users. I created the animation using frame-by-frame cel-style techniques in Photoshop and ImageReady entirely through photo manipulation. The spray foam behind the navigation is entirely a digital creation with a photo used only to enhance the texture.

Related posts:

1. Lithograhics.com
2. Code3Co Animated Banners
3. Milwaukee City Hall

When I created these, I didn’t intend them to be a display of different types of cartoon physics. Nonetheless, they each typify a different aspect of animation that is a pitfall for many new animators, and that can cause your viewers to feel uneasy looking at your animation if you aren’t careful.

Object Resistance: Watch the logo as the slogan moves left in the banner above. For three frames, the logo compresses and then releases. This slight compression tells the viewer that these two elements are on the same plane, next to each other, that one is pushing the other. You have to spell out this kind of contact in your animations if you want to avoid a feeling of unconnected elements randomly floating in space. Viewers can tell instinctually when an object behaves in a way they’re not expecting even if they can’t pinpoint what exactly is wrong with it.

Bouncing: The number one unconscious expectation of a bounce is bounceback. The element needs to overshoot its original position. Watch the logo to the left. See how it goes up a few pixels above its original position, with compression, and then comes back down? Most objects in real space have this characteristic. If you leave it out, your object will look like it’s somehow connected to the space it bounced into (in this case, the bottom of the ad).

Spinning: I could write a book on spinning graphics and what to watch out for if you are using them.I’ll just list a couple things here. First off, remember that your element has a back. When the object spins, you should not see two copies of the front or you will break the 3D illusion. You can remedy this quickly by flipping the element and performing the same steps as you did with the unflipped element to account for the back. Second, lighting. If you are using a 3D program to create your spinning element, you don’t need to worry about this if you set the light source, but all flat animations require you to pay strict attention to propagating your light sources.

Related posts:

1. RHH Foam Systems

Related posts:

1. Twilight Games Logo
2. Schroeder Bros. Construction, Inc.
3. RHH Foam Systems