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.
This document can be viewed online at: https://architect4wp.com/codex/using-architects-animations/
Animation demo
Visit Architect Demos to see a Panels animation example.
Visit Architect Demos to see a Components animation example.
Enable animation
By default, animation settings are not enabled. To enable them
- Go to Architect > Options
- Animation
- And enable them
Go to Animation settings in a Blueprint
Open the Blueprint you want to apply animations to.
- Go to the Animations tab
Animating Panels
For the first part of the tutorial, we will animate the whole panel for each post.
- Choose Panels in the Animate settings
Configure the Panels animation
- Select the Panels tab
Now you can configure the animations however you want!
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
- Go to the Animation Settings tab
- Select Content as what you want to animate
- Choose the components you want to animate, and drag them into the order you want to animate them
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
Go to the page with the Blueprint on it and see how the animation looks.
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