When it comes to eye-catching designs, smooth CSS animations are a popular choice. A testeful scroll or hover animation can make your design more interactive and fun. Bootstrap Studio offers a wide variety of animations that can be easily implemented in your project.

Adding Animations

Select any component on your page, and from the Option Panel click on the animations tab ( ). There are two types of animations: Scroll and Hover.

Scroll Animations

Scroll animations are triggered when you scroll down/up on your page. You choose a few configuration options like the animation effect and duration, and Bootstrap Studio will take care of including all required libraries and CSS to make it work. Internally, our scroll animations are implemented using the AOS Library.

From the Animations Tab you can change the following settings:

  • Type - Set the animation type (e.g. fade-up, fade-down, zoom-in, zoom-out and more)
  • Duration - Duration of animation (ms)
  • Offset - Trigger the animation some distance away from the element (in px)
  • Delay - Delay the animation (ms)
  • Play Once - Choose whether the animation should fire once, or every time you scroll up/down to element

Note: Scroll animations are disabled on mobile devices, as they can degrade scroll performance and are considered a poor experience there.

Hover Animations

Hover animations are run when you move your mouse over an element. To make them work, Bootstrap Studio uses the Animate CSS library internally.

A large number of animation effects are available, like bounce, pulse, wobble etc. If you want to test your animations directly in Bootstrap Studio, just click the Play button.

When a component has an animation defined, a brightly colored star is shown next to it in the Overview panel, so you can see which components are animated at a glance.

Removing Animations

To remove an animation from a component, select it, and in the Animations tab set the trigger to Never.

This will remove the animation assigned to that element.