Image

Animagic is guaranteed to put extra "FUN" in the functional

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.

Animagic's controls are straight forward and easy to use

Its settings aren't bloated and unwieldy, yet it offers you great control over creating fun, animated content for your pages. Let's take a look at some of what it has to offer. We also offer a quick tutorial / tour video below to get you started.

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 styles to choose from.


Duration

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

Delay

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

Offset

Determine how far up, in pixels, from the bottom of the browser you want your animation to be triggered. This triggering of the animation happens as the visitor scrolls down the page.


Word to the wise

"With great power comes great responsibility..."

- Ben Parker

While an over the top animation may be good in certain situations, often times it's 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 the Animagic stack can do. Most pages do not need a lot of animation.

Samples

It's time for the show!

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.

Simple & stylish

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.

Image

Image

More fading

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.


Staggered Delays

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.

Image
Image
Image
Image

Fade Direction

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.

Image
Image
Image
Image

More than just images

Images are one of the more popular things on a page to animate. Probably because they're more attention grabbing than text can be sometimes.

That said, you can animate a lot of different things using Animagic. In this case we're animating a Foundry Potion Pack Backdrop stack that contains our Header and Paragraph stacks, and a Margin stack to add our padding.


Image
Image
Image
Image

Animations within animations

In this example we've animated a Backdrop stack into the page using the Puff animation. That Backdrop stack contains a Header stack and this Paragraph stack. It also contains the images above the Header. We've Animated those as well using separate Animagic stacks. The difference is we've used delays on those to make sure they animate after the Puff animation on the Backdrop stack occurs.

Not all animations will work within another animations. This is just the nature of creating complex, nested animations. Try different animations out and see what you can create!


Foundry Compatibility

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.


Documentation

What does this setting do?

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.


Requirements

What will you need?

Animagic relies on the Stacks API to specific javascript libraries other tools needed for features in this stack. Let's look at the required software as well as the browser support for this stack.

What you need

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:

  • RapidWeaver v8 or newer
  • Stacks v4 or newer
Browser support

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:

  • Safari
  • Firefox
  • Chrome
  • Edge
elixir

THE FORGE. Stay up to date on future versions of Elixir products, as well as important news, updates and more through our newsletter.

Re-Download Purchases

Use your email address to look up your previous orders and retrieve download links.


© 2006-2021 Elixir Graphics

RapidWeaver is a Registered Trademark of
Realmac Software Limited