Adding animations and scroll effects

You can make an element fade or slide into view, drift as your customer scrolls, or react when they point at it. The settings belong to the element you select, so they work on a heading, an image, a button or a whole section. Look for the Entrance Animation, Scrolling Animation, Hover Effects and Effects groups in the settings panel on the right.

Considerations

• These groups only show in Pro mode. The builder starts in Basic mode, so switch it with the Basic mode and Pro mode toggle in the toolbar first.
• Animation applies to the element you select. To move a whole block at once, select its section, not the elements inside it.
• Depending on the element, the groups are on the Design tab or the Advance tab of the settings panel.
• Saving does not change your shop. Your live page only changes when you click Publish.

Add an entrance animation

An entrance animation runs once, when the element comes into view.

1. From your Orbit dashboard, go to Storefront, then Pages. Hover over the page and click Edit design to open it in the page builder.
2. Click the element you want to animate. The settings panel opens on the right.
3. Open the Entrance Animation group.
4. Pick an effect in Animation Type.
5. Drag Duration to set how long the animation runs, from 100ms to 3000ms. It starts at 600ms.
6. Drag Delay to hold the animation back before it starts, from 0ms to 2000ms.
7. Turn on Loop Animation if you want the effect to repeat without stopping.
8. Click Save.

Note: Duration, Delay and Loop Animation only appear once Animation Type is set to something other than None.

Entrance animation types

• None: no animation. This is how every element starts.
• Fade In: the element fades up from invisible where it sits.
• Fade In Up, Fade In Down, Fade In Left, Fade In Right: the element fades in while it moves a short way in that direction.
• Slide In Up, Slide In Down, Slide In Left, Slide In Right: the element slides in from that edge.
• Bounce In: the element springs into place.
• Zoom In: the element grows from small to full size.
• Rotate In: the element turns as it appears.

Add a scrolling animation

A scrolling animation is tied to the page position rather than to a single moment. The further your customer scrolls, the further the effect goes.

1. Select the element and open the Scrolling Animation group.
2. Drag the sliders you want to use. Each one is a separate effect and you can mix them.
3. Click Save.

The sliders are:

• Horizontal (px): moves the element sideways while scrolling, from -500 to 500.
• Vertical (px): the element drifts this many pixels while scrolling, from -500 to 500. A negative number moves it up.
• Rotate (deg): turns the element as the page scrolls, from -360 to 360 degrees.
• Opacity: fades the element on scroll, from 0 to 1.
• Scale: grows or shrinks the element on scroll, from 0 to 3.
• Blur (px): blurs the element on scroll, from 0 to 20.

Tip: The toolbar has a toggle that plays scroll effects on the canvas, so you can watch them while you work.

Add a hover effect

A hover effect runs when your customer points at the element with a mouse.

1. Select the element and open the Hover Effects group.
2. Drag Hover Scale to grow or shrink the element on hover, from 0.5 to 1.5. Leave it at 1 for no change in size.
3. Pick a Hover Shadow: None, Small, Medium, Large or Custom. Custom opens a box where you type your own shadow value, such as 0 4px 8px rgba(0,0,0,0.2).
4. Drag Transition Duration to set how long the change takes, from 0ms to 2000ms. It starts at 300ms.
5. Click Save.

Change opacity and filters

The Effects group changes how an element looks all the time, not only while it animates. Every setting is a slider:

• Opacity: how solid the element is, from 0% to 100%.
• Blur: softens the element, from 0 to 20.
• Brightness: from 0 to 200, where 100 is the normal look.
• Contrast: from 0 to 200, where 100 is the normal look.
• Saturation: how strong the colours are, from 0 to 200.
• Grayscale: drains the colour, from 0 to 100.
• Hue Rotate: shifts the colours round, from 0 to 360.

To put all of them back to their starting values, click Reset All Effects at the bottom of the group.

Turn an animation off

1. Select the element.
2. In Entrance Animation, set Animation Type to None. The other fields in the group disappear.
3. In Scrolling Animation, set Horizontal (px), Vertical (px), Rotate (deg) and Blur (px) to 0. If you changed Opacity or Scale, click Undo in the toolbar to put them back.
4. In Hover Effects, set Hover Scale to 1 and Hover Shadow to None.
5. Click Save, then Publish when you want the change to go live.

Related guides

• Using the element settings panel
• Adding a section
• Showing or hiding an element with conditions
• Getting started with the page builder