Stacks Image 1060

Fun and functional

The Animagic stack allows you to quickly and easily create stylish, fun animations for page elements that are triggered as your visitors scrolls down your pages. This preview site shows off some of the things you can do with this amazing stack.

If you ever want to see an animation again, on any of the sample pages, simply reload the page and scroll back down the page.
Stacks Image 1073

Animation Styles

Animagic allows you to choose from a large selection of animation styles. From subtle fades to grand entrances.

There are over 35 different animations to choose from when using Anamagic, so experiment to find what works best for you.
Stacks Image 1071

Duration & Delay

You're able to define just how long it takes for each individual Animagic animation to take place once triggered.

You can easily set a delay time as well which tells Animagic how long to wait to start the animation after being triggered.

Don't overdo it

While an over the top animation may be good for some things, often times its the subtle animations that are the most impressive. And let's be honest, I only have as many animations on this page as I do in order to show what sorts of things this stack can do.
With great power comes great responsibility.
Uncle Ben


The offset setting tells Animagic how far up, in pixels, from the bottom of the browser window you want your animation to be triggered. This triggering of the animation happens as the visitor scrolls down the page, starting each individual animation as the visitor reaches them.

Make mine modern

Animagic uses quick rendering CSS 3 animations. These animations require modern browsers to display them: Safari, Chrome, FireFox and Internet Explorer 10+.

Note: Your content will still be displayed in older versions of IE, but will not animate.


Be sure to check out the other samples pages to see a few of the other ways you can use the Animagic stack. We also provide a walk-thru video where we walk you through using this fun new stack.