Architect Documentation & Tutorials

Using Architect’s Animations

The most requested feature – since even before Architect was officially released – was animations. And in Architect 1.2, they are here.

Animations in Architect animate the panels containing your content, or the individual content components. They do not allow you to add and animate content within their settings.

 

Animation demo

Animation demo

Visit Architect Demos to see a Panels animation example.

Visit Architect Demos to see a Components animation example.

Enable animation

Enable animation

By default, animation settings are not enabled. To enable them

  1. Go to Architect > Options
  2. Animation
  3. And enable them
Go to Animation settings in a Blueprint

Go to Animation settings in a Blueprint

Open the Blueprint you want to apply animations to.

  1. Go to the Animations tab
Animating Panels

Animating Panels

For the first part of the tutorial, we will animate the whole panel for each post.

  1. Choose Panels in the Animate settings
Configure the Panels animation

Configure the Panels animation

  1. Select the Panels tab

Now you can configure the animations however you want!

Check it in action

Check it in action

Go to the page with the Blueprint on it and see how the animation looks.

It is very important to understand that animation can get complicated, so try to keep things simple, and not all animation types suit all situations. For example, for panels, fadeInLeftBig is much better than slideInLeft.

Animating components

Animating components

  1. Go to the Animation Settings tab
  2. Select Content as what you want to animate
  3. Choose the components you want to animate, and drag them into the order you want to animate them
Component Animation settings

Component Animation settings

For each component you selected, go into its tab and set the animation settings.

This is just the same as the panels above except there isn't the alternate animation option

The warning to keep it simple applies even more strongly to animating components. With multiple components it's very easy to quickly complicate the animations such that you can't work out why it's not going as planned!

Check it out

Check it out

Go to the page with the Blueprint on it and see how the animation looks.

Have fun!

Have fun!

Animations can add a bit of spark to your site's content. Provided you don't overdo them and they can help your readers engage more with your content.

This is just the beginning for animations in Architect. There is more work to get them to respond better to page scrolling and to respond to slide transitions. In fact, in sliders, they add much value yet.

This tutorial written with Architect v1.2.0