Animations can make a page come alive, but they can also overwhelm users or make content difficult to read. It is therefore recommended that animations be used in moderation. With careful application, you can use animations to make your website beautiful.

The most common animations you will encounter in Finalweb are the Jumbotron Carousel (or slider) animations. By default, when you click “Next Slide” or it rotates automatically, the old slide will slide out the left side of your screen, and the new slide will slide in from the right. These animations can be customized by editing the Carousel section and navigating to the Layout Settings tab.

Under “Animations” on the layout settings tab, you will see three different animation editors for different triggers: On Hover, On Element Loaded, and On Next Slide.

These specify when the animation will be called. Each trigger has 1 or more animation options, an animation speed selection, a delay setting, and an option for which element to animate.

Some triggers may have different options depending on their specific capabilities. There are over 50 animations to choose from. Some animations are “emphasis” animations, which will add a temporary effect to an element, and then return to normal. You will also find exit and entrance animations. If you give an element an exit animation, such as “Fade-Out”, the element will exit the screen when the animation is called. If you add “Fade-Out” to the On Element Loaded trigger, your selected element will disappear when it loads onto the page! Make sure you’re choosing the right animation for your specific situation.

You can see these animations in action here: https://vernon.finalweb2.finalweb.net/page/social-media-example

Many other section types can be animated, including tiles, headers, text sections, feature boxes, icon boxes, and more. If you’d like personal, professional, and helpful assistance with animations or any other aspect of your website, please reach out to us at https://www.finalweb.com/support