Buy Now | User Guide | More Examples | Panache Home
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.
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 is similar to Imploding Characters, with the addition of a little dance step in the middle!
Ah Ah Ah Ah... Stayin' Alive.
Powered by Panache
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.
Powered by Panache
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
Powered by Panache
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!
Powered by Panache
This paragraph has been faded in. Nothing could be easier.
Powered by Panache
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.
Powered by Panache
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.
Powered by Panache
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.
Powered by Panache
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.
Powered by Panache
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.
Powered by Panache
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.
Powered by Panache