The Animagic stack allows you to trigger beautiful animations as your visitors scroll down your pages. These animations are more than a little sleight of hand -- they help in drawing your visitor's attention to specific areas of a page and allows you to highlight important content.
We've pulled all of the tricks out of the hat (well almost all of them) and created a slew of fun animation samples below. This is far from all that can be done with Animagic though.
Note: If you ever want to see the animations again, simply scroll to the top of the page and click your browser's refresh button. The animations are reset on page load.
This block of text and the its header, use Animagic's most basic animation style -- the simple fade. We've made this one the default for a reason though. This is the bread-and-vegan-butter of most of the animations you'll be building.
The default has a 100ms duration (or about 1 second) and an offset of 150px from the bottom of the browser window.
This animation is also a fade, but we've slowed the duration of the animation, setting it at 2000ms, or approximately 2 seconds. This time we've also included a 400 ms delay to pause for a fraction of a second after it is triggered, before it animates.
Animagic allows us to delay the start of triggered animations. This means we can do some pretty cool things with very little effort. In this example we've set a different delay for each of the four animations below. We've increased the delay by 300 ms for each Animagic stack.
In this example we've combined some delays, along with four different animation styles. We have the outer columns fade in from the left and right while the two middle columns fade in from the top and bottom. This gives an animation that looks complex, but is really simple to setup.
While we've built our example page for Animagic here in Foundry, as that is what our site is built with, we do not recommend purchasing Animagic for use with Foundry. Foundry already comes with its own animation stack, which is designed specifically for Foundry. Animagic is designed and meant to be used with themes.
In addition to the tutorial walk through video we provide at the top of this page, we also offer detailed documentation for each settings within the stack. This helps you both when creating your site as well as in making the decision to purchase the Animagic stack.
You can find the full documentation and tutorials for Animagic, as well as all of our other products in the Elixir Support Hub.
As mentioned, we use the latest Stacks API for the Animagic stack to help facilitate its functionality. You'll need the following tools to make use of Animagic for your site:
This stack is designed with modern browsers in mind to give your visitors the best experience possible. Animagic will work nicely in the most recent versions of these browsers: