Panache by PVII

Version 1.1.0 — Please make sure you test this in a new folder. Do not reuse pages that use the previous version.

Additions & Fixes

Implode and Typewriter animations now preserve links, bold, em, and other tags.

Best Practices...

The available animations have certain logical aspects that you should be mindful of. For instance, the 4 Implosion animations should be used for headings or a simple sentence. If you try to implode a full paragraph, for instance, it could look a little busy.

Viewports

Animations can vary dramatically based on the type of animation and the viewport you choose. For example, Implosions tend to look more interesting, with a viewport further up in the hierarchy. To make them look really cool, I wrapped the entire body of this page inside a DIV to which I assigned the class layout. This makes the implosion appear to come in from the entire page. Typewriter, Zoom, and Fade animations really requires no special viewport considerations and their viewports can be set to This Element option.

Beta User Guide

We've prepared this basic user guide for beta testers. In the event that you have questions, please ask for clarification on the Peppers forum. Please scroll down the page to see the guide.

The UI

The UI is fairly straightforward. Let's explore the options and settings...

Mode

Either Create or Modify

Animation Viewport

Select from a list of all DIVs on your page to set a viewport. The viewport you choose will be set to overflow hidden. It is this viewport that your sliding, zooming, and imploding animations will appear to grow from.

Tip: To enhance the animations on this page, we wrapped the entire contents of the body tag inside a DIV classed as layout. We use that element as the viewport for all of the animations except for the typewriter effects, which doesn't really need a viewport.

Trigger Type

Choose how to run your animations...

Manual

Choose manual if you want to set up your own trigger - a button, for instance, or text link. Use the Behavior panel to choose the Panache Control Behavior:

Assign the Behavior to a text link or image of your choosing. Click here to reanimate the screen capture above.

Select the ID of the Panache element you wish to affect. Trigger Immediately, or use whatever delay is set on the animated element.

Run on Page Load

The animation sequence will begin as soon as the page loads.

Run When in View

The animation will run when it is within the browser viewport. If you subsequently scroll the page so that the element is outside the viewport, then scroll back in, the animation will repeat.

Run on Scroll To

The animation will run once, when the element comes into view inside the browser viewport. It will not repeat if you scroll it back out of view.

Animation

Select an animation method.

Duration

Enter a duration, in seconds (decimals allowed). This how long the animation will run, from beginning to end. The higher the number, the slower the animation.

Delay on Start

Enter a value, in seconds. The animation will not begin until the delay expires. The delay counter is based page load or scroll to time. As a best practice, we don't recommend setting a delay on elements set to animate when scrolled to.

Include Fade with Animation

The animated element will fade in as it's animating. Of course, for a fade-in animation, this option will do nothing.

Note: This option is unavailable for the Typewriter animation.

User Classes

One or more user classes can be assigned to either the root PCH container or the item (element) inside that is being animated. Use this option as an aid to style your animated elements.

Notes

If you are regular LEM user, please note that Panache is far more advanced. As such, you cannot assign Panache to the structural DIVs of our leading page building tools: Harmony and Layout Builder. This is so because unlike LEM, Panache must create markup dynamically, so it requires a root wrapper. If you are using Panache on a Harmony page, you can animate headings, paragraphs, images, etc... but not an entire Harmony content DIV. You can, however, insert your own DIV, styled as you please. Also note that for the truly code-challenged, a nested Harmony instance can be added and that entire instance can in fact be animated. We'll go into more detail in the actual user guide and, as always, we welcome your suggestions and feedback.