Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Panache Viewports: A TutorialAn Automated Animation Builder for Dreamweaver

Buy Now | Panache Home | User Guide | Examples

What is a Panache Viewport?

A Panache Viewport creates visual boundaries for your animation. This is especially important for Slide In, Implode, and Elastic animations, which are staged outside the viewport. When you select a Viewport in the Panache UI, the element you select is set to a CSS state of overflow hidden. In this way, any element whose code resides within the viewport, but whose CSS positioning pushes it outside the viewport's physical boundaries, will be effectively hidden from view. What does this mean in plain English?

It means that the animation will enter from the outer boundaries of your viewport. If your viewport has borders or a background color, the animated element will appear to enter your "stage" from the edges of the viewport.

Viewports are not necessary for all animations

When using the Typewriter, Zoom-In, or Fade-in animations, there is no need for setting a viewport. With these three animation types it is advisable to set the viewport to "This Element".

For all other animations, a viewport is a very important element to consider, for a number of reasons. Let's look at the remaining animations and discuss the best practices for setting viewports.

Viewports Are Necessary For All Slide-In Animations

The four Slide In animations are staged just outside the relevant edge of their declared viewport. The animated element, therefore, will become visible as it crosses that threshold. Bear that in mind when you create this type of animation and choose a viewport that provides the boundaries you need for the look you want.

Special Note: If you select None for your viewport, your assumed viewport will be the entire body of your page. In a Slide From Bottom animation, your animated element will be staged below the bottom edge of your browser window, which will cause a vertical scrollbar to either appear or, if one is already visible, to lengthen. When your animation ends, and reaches its destination, the scrollbar will disappear or grow shorter, which can sometimes be a rather jarring effect. A Slide From Right animation, set without a viewport will spawn a horizontal scrollbar, which will then disappear once the animation has completed, causing the page to jump. This is because when you select a Viewport in the UI, that element is set to overflow hidden (discussed below). If the body's overflow is hidden, the page will not be scrollable.

Implosion and Elastic Animations

These unique animations have equally unique viewport needs and criteria. The element you are animating is broken down into individual characters or words. The individual pieces are staged at varying fixed distances from the animation's resting position. The distance varies between 200 and 800 pixels in all directions. This makes it imperative that you choose a good viewport.

Tip: Most web pages are designed with an encompassing container or wrapper, which is usually a great choice for a viewport. In any event, choose wisely, bearing in mind the fixed distances the animated pieces will need to traverse.

The Viewport Selection List

The selection list inside the Panache UI lists the parent elements of the item you are animating. Here is how the list would look in a typical Harmony layout:

The items listed in the drop-down are all parents of the element being animated. Notice the progression upwards in the hierarchy from "This Element". It ends at two elements of particular interest:

1. <div id="p7HMY_2...

This is interesting because there is another Harmony instance above. But this second instance of Harmony is a sibling to p7HMY_1, rather than a parent.(p7HMY_1)

2. <div class="page-wrapper>

This element was one that I added to the page. It is wrapped around all of the code inside the opening and closing body tags, which makes it a parent of p7HMY_2 and, therefore, a parent of the animated element.

So why did I add this page-wrapper DIV?

It was added because I knew I would be creating an Elastic animation right about here, and I wanted to animation to appear as if it is entering from the entire window. Click below to play the animation:

Click Here To Play or Replay The Animation

This Elastic animation comes in from the entire window.

There is one small remaining issue...

Stacking Order (z-index)

If you watch the animation closely, you'll notice that it comes in below the menu bar. This might be satisfactory... or not. Whether you like the effect or not, let's discuss the reason.

The menu is set to fixed position on scroll. To ensure it is always on top of the page content, including various widgets, its z-index is set to a value of 9999999. If we want the animation to appear to be coming over the top of the menu, we simply need to add a CSS rule. You can add it to your Panache style sheet or, preferably, to an external style sheet of your own making. Here is the rule:

.pch-item { z-index: 99999991; }

Tip: You can also target a specific animation for this CSS class. Simply prepend the selector name with the ID of Panache container for a particular animation:

#p7PCH_1 .pch-item {
z-index: 99999991;
}

More about Stacking Order

Your page might contain elements that are set to position relative or position absolute. In many cases, these elements will also contain a z-index value. If you wish for your Panache animations to run above these elements, you need to use the above CSS rule, setting the z-index higher than the other positioned elements on your page.

The Importance and Intricacies of Overflow Hidden

The overflow property, set to hidden, is what makes a viewport a viewport. Here are two points to ponder:

  • If your animation does not appear to be using the viewport you selected, check to see that there are no other elements in the hierarchy that might also be set as viewports.
  • If there are other elements simply set to overflow hidden in your CSS. You'll need to coordinate your viewport selection or change you CSS.

Old Layouts That Use Overflow Hidden to Clear Floats

Many older page layout techniques clear floated elements by setting the containing element to overflow hidden. If your animations are anywhere inside that container, the container set to overflow hidden will server as an unintended viewport (unless you've set a specific viewport further down the page hierarchy).

Clearing Float Without Overflow Hidden

Our Affinity Page Pack is an example of a viable responsive page layout that can be used for years to come, even if it is a little old. Affinity clears column floats by setting the columns-container element to overflow hidden. Look for these rules in your Affinity CSS file:

.content-wrapper {
margin: 4em 1.25em 0em 1.25em;
overflow: hidden;
}
.columns-wrapper {
overflow: hidden;
background-color: #FFF;
position: relative;
}

Remove the overflow: hidden declaration, then add this new rule below the above 2:

.columns-wrapper:after {
content: "";
display: table;
clear: both;
}

Now your viewport(s) will work as expected.

Animation...

When done right, can amplify your message

If Panache were available to early humans, can you imagine how much more effective cave drawings would be? Panache is an animation tool, but it is just as much a communication medium. If used effectively it can enhance your message, tell a story, or exclaim your point with a level of engagement that simply cannot be matched. Used creatively, Panache can augment your message and capture eyes, drawing keener focus to your story.

Measured against other Dreamweaver animation tools, Panache simply has no equal. PVII tools make Dreamweaver better.

Key Features

  • Automated User Interface
  • Responsive & Adaptive
  • Makes Dreamweaver Better
  • No coding Required
  • Choreograph Animations with Full Control over Timing
  • Set Animations to Run On Load, when Scrolled To, or When In View
  • Set Animations to Run Via Trigger Links Assigned to a Text or Image Link
  • Animation Can Be Applied to Any Element on Your Page
  • Fade Out Selected Elements When Animation is Done
  • Select a Viewport from a List of All Elements on Your Page to Establish Animation Boundaries
  • Supports Custom User Classes
  • Create Control Behaviors Assigned to Text or Image Links
  • Use Control Behaviors for Replaying or Skipping Animations
  • And much more...

Buy Now

The Panache UI handles all the tedious work of building and coding your animations. Simply select a viewport to define the outer boundaries of an animation, a Trigger Type and an Animation method. Then put on your choreographer hat and set timing functions and you're done! Nothing could be easier.