How to create animations in Bubble.io: Step-by-Step Guide

Go to the Design tab and select any element you want to animate, for example a Group that contains your hero section text. Go to the Workflow tab and create a trigger. For a page-load animation, use the Do when condition is true event with the condition Page is loaded. Add an action: Element Actions then Animate. Select your target element, choose an animation type (Fade in, Slide left, Bounce, Pulse, and others), and set the duration in milliseconds such as 500. The element will play the animation each time the workflow fires.

For smoother, more customizable animations, add an HTML element to your page. In the HTML element's content area, paste a style block targeting the element you want to animate. First, give your target element a unique ID in Settings, then Visual Settings, then ID attribute. Then in the HTML element write a style tag with a rule for that ID, setting transition to all 0.3s ease. Now whenever a Conditional changes that element's properties such as background color or opacity, the change will animate smoothly instead of snapping instantly.

1<style>
2#hero-card {
3  transition: all 0.3s ease;
4}
5#hero-card:hover {
6  transform: translateY(-4px);
7  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
8}
9</style>

Select any element such as a card Group in the Design tab. Go to its Conditional tab. Click Define another condition. Set the condition to When This Group is hovered. Then change properties like Background color (for example from white to light blue), Border style, or Shadow. Because of the CSS transition added in the previous step, these changes will animate smoothly. For buttons, change the font color and background on hover for a clear interactive feel.

For elements that animate into view as the user scrolls, set the element to hidden by default by unchecking Visible on page load. Add a Do when condition is true event with the condition referencing whether the element's group is visible in the viewport. In the workflow, add an Animate action with Fade in or Slide up on the target element. If you need more precise scroll detection, add an HTML element with a small JavaScript snippet that uses IntersectionObserver to set a custom state when the element enters the viewport.

Create a workflow with multiple Animate actions in sequence. The first Animate action plays on Element A such as fading in the heading. Add a Pause before next action of 200 milliseconds. Then add a second Animate on Element B such as sliding in the description. Add another pause and a third Animate on Element C such as fading in a button. This creates a staggered entrance effect where elements appear one after another.