Made in Builder.io

Announcing Visual Copilot - Figma to live in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

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