Thanks! Please check the following:
System requirements
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with.

License agreement
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
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)!
Fade In
Bounce
Flash
Head Shake
Jello
Pulse
Rubber Band
Shake
Swing
Ta Da!
Wobble

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.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Pocket
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.