Tsooj Media

Stacks, Websites and Office Automation...






AnimateIt

Free

AnimateIt Stacks set


With the AnimateIt stacks set you can very easily create cool and fun CSS3 based browser animations for a single stacks element, predefined theme elements and of course on all of your custom HTML element. This stacks set comes with over 50 predefined ready to use animations.

Example


Enjoy the upcoming demonstration video, and have a look at the examples website.

More examples
More examples coming soon...

AnimateIt Stacks set Manual


Currently this stacks set contains 2 stacks and using this Stacks set is very simple:
  • Start by adding a Stacks page to your project;
  • Add the AnimateIt Enclosure to enable the Animations on your stacks page;
  • Use the Enclosure to make theme elements or custom html elements Animate or;
  • Add the normal AnimateIt stack to add content inside this stack and AnimateIt.

More details
Below a more detailed explanation, click on an item to show/hide it's documentation content.
AnimateIt Enclosure Sidebar
Animate theme element
Use this checkbox if you would like to Animate one of you theme elements and show the following input elements.

Element ID
The name of the theme element that you would like to Animate,
note that this should be an ID according to the HTML definitions.
So for example <div id="content stroke"> as used in the example with the Sereno Theme.
Event
You can select from the events Hover, Click or After page load. All effects are added to the selected Element using the AnimateIt system scripts that performs it's magic as soon as the page is loaded by your browser.

Animation

Animations are displayed in the Animations and Custom HTML section of this manual.
Publisher Period HUD
Event
You can select from the events Hover, Click, On page load or After page load. All effects are added to the selected Element using the AnimateIt system scripts that performs it's magic as soon as the page is loaded by your browser. Except for the On page load event that is directly handled by the browser during page loading.
AnimateIt Effects
Animations
Selecting the Animation is as simple as selecting one from the drop-down list with the available animations. Note that the chosen Animation is only added once for the selected Event.

Custom HTML
After adding the AnimateIt Enclosure you can already start using the Animations during page load by adding the AnimateItTrigger class to your custom HTML elements. Of course you should also add the class of the Animation that you would like to use.

So for the fadeInRightBig Animation we use the following code:
<div class="AnimateItTrigger fadeInRightBig">....</div>


Note that the predefined Animation classes are case sensitive.

FAQ


All currently known FAQ items are shown below
The new Stacks plugin v2 comes with a lot of new features for 3rd party developers, one of them is the new drop-down input element that we are using in the AnimateIt stack for the selection of Animations and Events.

AnimateIt Stacks Set


With the AnimateIt stacks set you can very easily create cool and fun CSS3 based browser animations for a single stacks element, predefined theme elements and of course on all of your custom HTML element. This stacks set comes with over 50 predefined ready to use animations based on Animate.css from Dan Eden. Check out his website if you would like to use his cool animations on other custom HTML and CSS projects.

CSS animations are currently supported in Apple Safari, Google Chrome, and Mozilla Firefox. Microsoft promised support for Internet Explorer 10, and support for Opera 12 has been announced.

What you get when purchasing this stack:
  • An installer for the AnimateIt stacks set;
  • RapidWeaver 5 example project;
Requirements:
  • RapidWeaver 5;
  • Stacks Plugin 2 or above.
Version information:
For those who are interested in the changes made to the AnimateIt Stacks set.
First public release on 28 november 2011.