Learn how to ship impactful customer journeys with Builder

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Add animations to your content to enhance your UI, usability, appearance, and to convey important information to your users.

To get the most out of this document, you should be familiar with the basics of using Builder. For more detail, visit Getting Around Builder: the Visual Editor.

You can animate any block, or element, in the Builder Visual Editor. While you can use the UI for endless no-code animation possibilities, you can also provide your own code to animate elements.

To animate a block:

  1. Select the block.
  2. In the Animate tab, click the + Animation button.
  3. Select a Trigger. A Trigger is the action that causes the animation to start. The Trigger you choose displays contextual options. Refer to the next section for details.
  4. Select an Animation.
  5. Specify the Duration.
  6. To edit Easing, the Delay, and Threshold, click the three dots to the left of the Preview button.

Builder signifies that a block has animations with an icon on that layer in the Layers tab.

The video below shows where to find animation settings in the Animate tab.

The Animate tab offers three triggers, Scroll in view, Page load, and Hover. A trigger is an action that causes the animation to begin. Depending upon the trigger you choose, the options vary.

When the block scrolls into the viewport, the animation starts.

To trigger the example animations below, scroll so that the boxes come into the viewport. You might have to scroll away and scroll back to them.

TriggerAnimationExample

Scroll in view

Fade in

Scroll in view

Fade in up

Scroll in view

Fade in down

Scroll in view

Fade in left

Scroll in view

Fade in right

When the page loads, the animation starts.

To trigger the example animations below, reload the page.

TriggerAnimationExample

Page load

Fade in

Page load

Fade in up

Page load

Fade in down

Page load

Fade in left

Page load

Fade in right

When the pointer hovers over the boxes, the animation starts as in the examples below.

To trigger these animations, hover over each box.

Tip: When you select Hover as the Trigger, you must provide a custom animation. You can provide code or edit the style options to specify which properties change.

The animations below are only a small selection of examples.

TriggerProperties Edited for Custom AnimationExample

Hover

Background color

Hover

Opacity 0, border

Hover

Width, background color, background image

Hover

Rotate z 45 degrees

The Animate tab offers a number of animations.

  • Custom: you specify the animation exactly. The next section covers custom animations.
  • Fade in: Gradually increases the opacity of an element from transparent to fully visible.
  • Fade in up: Combines a fade-in effect with upward motion; the element becomes more visible as it moves up.
  • Fade in down: Merges a fade-in effect with downward motion; the element becomes more visible as it moves down.
  • Fade in left: Blends a fade-in effect with leftward motion; the element becomes more visible as it moves from right to left.
  • Fade in right: Integrates a fade-in effect with rightward motion; the element becomes more visible as it moves from left to right.

The video below shows opening the Animation tab and scrolling through the available animations:

You can customize animations for any of the triggers; however, Hover is unique because when you use a Hover trigger, you must provide a custom animation.

To apply a custom animation:

  1. Select the block you want to animate.
  2. Go to the Animate tab.
  3. Click + Animation.
  4. Select a Trigger.
  5. For Animation, select Custom.
  6. In the Steps section for Hover state, click Edit. The panel that displays is the same as the Style tab, except that the styles you specify here are only for the hover state of the selected block.
  7. Set your styles and hover your mouse over the block to preview.

The video below shows how to apply a custom animation and uses the Hover trigger, but you can use Scroll in view and Page load in the same way. Though this example uses background color and width, you can edit any of the block's styles.

Learn more about interactivity in State and Actions.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences

Gartner Cool Vendor 2024