Stacks4Stacks

Done properly, subtle animations are an effective method to enhance the presentation and professionalism of completed webpages. Our AnimateIt stack can be configured so that content above the page fold can fade into view as a page loads or you can have images or content containers slide into position as a user scrolls down the page.

AnimateIt is a safe stack to use. The CSS animation effects consume few resources to work smoothly. AnimateIt will not hide your content from search engines or leave people on older web browsers staring at a blank page! A series of 'safety nets' built into the core of AnimateIt ensure safe and reliable deployment in various setups.

As well as being able to animate stacks you drag and drop inside AnimateIt, it's also possible to tell AnimateIt to apply animations to other parts of a webpage; like a theme banner container, a navigation menu bar or perhaps a website footer. This makes AnimateIt a great companion stack to use with ThemeFlood themes.

Examples

Here are some working examples of the AnimateIt stack. The text animates into view, as your scroll the webpage up or down. This is just a taster of what the AnimateIt stack can do. The free demo version available to download lets you play with all the trigger methods and explore all the animation effects available (there are over 50)!

Setup

Please follow these instructions carefully for configuring a single AnimateIt stack within your website:

1. Once installed into Stacks and RapidWeaver, add a Stacks page type to your project (if you've not done so already)
2. Open the Stacks Library and search for 'AnimateIt'
3. Drag and drop a copy of the AnimateIt stack into the page
4. Additionally, drag and drop a suitable stack inside AnimateIt (like some text or an image)
5. In the Animateit Settings, configure all aspects of the animation; like what it is applied to, the type of animation effect, its trigger and its speed
6. Switch to preview mode in RapidWeaver and check the AnimateIt stack works as expected and scales to fit different screen sizes. Publish or export your page when done.

Obviously there are limitations as to what AnimateIt can animate. Complicated stacks like video, slideshows, popovers, tabs and accordions may not function as expected. Some stacks do not like to start on a page 'hidden' because it can break their sizing or animation calculations. Please use the free demo version to test AnimateIt against any mission-critical stacks you plan to use. AnimateIt is good to use for simple content types; like images and text.

Take care when using AnimateIt stacks configured to trigger on scroll, when used in conjunction with bouncing effects. A known issue is that if you stop scrolling a page with an AnimateIt stack on the extreme edge of the browser viewport, it may cause the contained element to animate relentlessly (as it bounces in an out of the viewport). A simple workaround is to ensure you have a healthy amount of margin above and below the element to be animated; so people have to scroll it deeper into the viewport. A 'viewport' is just another name for the viewable portion of the webpage, within the browser window. Naturally some effects work better with certain triggers, compared to others. You are given all the available settings to find combinations of triggers and effects you feel work best together.

By default, AnimateIt settings will only take effect on stacks nested within the AnimateIt stack itself. But you can change the Apply To setting and change this to Custom. Then you can enter one or more custom selector names (in CSS / jQuery format) to other elements on the page you want to animate.

The key towards successful animations in web design is simplicity and subtleness. Some RapidWeaver users make the mistake of over-animating too many page elements; to the extent that a page design can quickly become irritating and too distracting. Ideally an animation should be subtle enough that it is barely noticeable by the user. Having a banner quickly slide into place from the side of the page or column headings dropping into view are good examples. Bad examples would be having whole sections of the page bouncing into view with a slow 'elastic' effect. Too many animations looks cheap and amateurish. Animations should be quick and relevant.