A simple and quick way to make your Foleon Docs more engaging is by animating your blocks, columns, and elements. In this lesson, we’ll talk about when and how to use animations, what mistakes to avoid, and some best practices from our Professional Services team. Animating your content can help bring your pages to life, but there are some aspects to be mindful of. Are animations compliant with your brand? What qualities or adjectives do you associate with your brand? Can these qualities be reinforced or hindered through animation? What parts of your page design would you like to give extra attention to? These questions should all be considered when deciding how to include animation. Animation can be added to all three levels of the page structure. When adding animation to a block, it applies that animation to all of the content inside of that block. Column animation affects all of the content in the column, and individual elements can also be animated. It’s important to consider how to work animation into these different layers of content, to deliberately call attention to specific areas of the page. Establishing a general system within your company for how and when to use animation can go a long way in ensuring that your content stays consistent. Playful animations in a formal content piece may take away from the impact of that information. Some animations tend to be more universal, such as the Fade animations. Because they are sleek and modern, they’re more versatile and widely adopted across different brands. The Zoom in animation is great for emphasizing icons, callouts, and data elements. When it comes to animating, you can often achieve better results by using less. Here’s an example of where the entire block animates in. This looks a little bit strange, because it takes away from the block background’s consistency. A better solution would be to animate the image element or column so that the block background stays grounded on the page. Form should follow function - Decide which animation is appropriate based on the layout and intended goal. Some page designs lend themselves more towards specific animations. For example, content that is off-center, hugging the left or right sides of the page, are ideal opportunities to use the fade in left or fade in right. Having a 2 column block where the left column fades in from right and the right column fades in from left will create an effect that’s almost like cells multiplying. This can insinuate growth and expansion. There’s a couple effective ways to use the reveal color effect for a text element, by either matching a brand color accent, or matching the background color of the block. When starting to consider animation, it’s nice to know that our default black and white templates have some animations applied to them, so these are a great starting point to experiment with. I hope these tips come in handy as you continue to elevate your doc designs to new heights. Good luck adding animation to your Foleon Doc! I can’t wait to see what you create.