7/4/2023 0 Comments Animations on scroll![]() ![]() 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. You have control over the type of animation and whether to loop infinitely. Load animations are run automatically when the page is loaded in the browser. If you want to test your animations directly in Bootstrap Studio, just click the Play button. To make them work, Bootstrap Studio uses the Animate CSS (opens new window) library internally.Ī large number of animation effects are available, like bounce, pulse, wobble etc. Hover animations are run when you move your mouse over an element. Scroll animations are disabled on mobile devices, as they can degrade scroll performance and are considered a poor experience there. Play Once - Choose whether the animation should fire once, or every time you scroll up/down to element.Offset - Trigger the animation some distance away from the element (in px).fade-up, fade-down, zoom-in, zoom-out and more) Internally, our scroll animations are powered by the AOS Library (opens new window).įrom the Animations Tab you can change the following settings: 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. Scroll animations are triggered when you scroll down/up on your page. There are three types of animations: Scroll, Hover and Load. To add an animation to any component, select it and go to the Animation tab of the Option Panel. Bootstrap Studio offers a wide variety of animations that can be easily implemented in your project. A tasteful scroll or hover animation can make your design more interactive and fun. ![]()
0 Comments
Leave a Reply. |