Panache by PVII: Animation ExamplesAn Automated Animation Builder for Dreamweaver

Buy Now | User Guide | More Examples | Panache Home

Before you read further...

This demo page was made to illustrate each of the pre-programmed animations available with Panache. Panache animations can be triggered on page load, when an element is scrolled into view, or clicking/tapping a link. Animations can also be timed to present your information in a carefully choreographed show. The demos on this page are all triggered by links that you need to click or tap. The links were created using the included suite of Panache Control Behaviors.

More Examples

While this page is meant to illustrate the various animations included with Panache, it is important to realize that this is a tool that can help you craft carefully choreographed animations that can tell a story. See: Telling a Story with Panache

Elastic Characters: Run or Replay

Elastic Characters is similar to Imploding Characters, with the addition of a little dance step in the middle!

Ah Ah Ah Ah... Stayin' Alive.

Elastic Words: Run or Replay

Use Elastic Words when you text to be animated contains more than 40 or 50 characters.

The rain in Spain falls mainly on the plain.

Imploding Characters: Run or Replay

To get a good effect, the containing viewport is set to the page wrapper so the characters appear to be animating from the edges of you window. Imploding Character animations should be limited to no more than 50 or 60 characters. If you require more, then use the Imploding Words or Elastic Words animations.

Imploding characters

Imploding Words: Run or Replay

Use Imploding Words when your element contains more than 50 or 60 characters.

Imploding Words have a different effect than Imploding Characters, but it's no less explosive!

The Fade Animation: Run or Replay

This paragraph has been faded in. Nothing could be easier.

Slide From Top: Run or Replay

This element is set to run for a duration of 2.5 seconds with no delay. The Viewport was set in the Panache UI to the content DIV so that the animations is constrained by the borders around this row.

Slide From Bottom: Run or Replay

This example also utilizes the When Done: Fade Out effect. After 5 seconds the animated element will slowly fade out.

This element is set to run for a duration of 1 second with no delay. The Viewport was set in the Panache UI to the content DIV so that the animations is constrained by the borders around this row.

Slide From Left: Run or Replay

This element is set to run for a duration of 3 seconds with no delay. The Viewport was set in the Panache UI to the content DIV so that the animations is constrained by the borders around this row.

Slide From Right: Run or Replay

This element is set to run for a duration of 2 seconds with no delay. The Viewport is set to the content DIV that houses this element.

Zoom In: Run or Replay

This paragraph is set to zoom in with an animation duration of 1 second. Because the paragraph is centered, the zoom appears to be growing out of the center.

Typewriter: Run or Replay

The Typewriter effect can be a cool addition to your page. Typed elements can include bolded text, and even Hyperlinks. We've styled the text in this paragraph to look like a terminal screen, just for effect.