Animations are a powerful feature of Replo that can make your pages feel sleek, approachable, and interactive. In Replo, almost any component can be animated, and there are many built-in animations available.
Adding an Animation
To add an animation to a Replo component:
- Find the component you want inside the page and click to select it.
- On the right side of the editor, find and click the Interactions tab.
- Find the Animations heading, then click the "+" button to add a new animation.
Previewing an Animation
Once you've added an animation, you can click the "Preview" button to see what it will look like inside the page. If you want, you can open Preview Mode to see the animation in action as you scroll through the page.
Types of Animations
There are several different times when an animation might play - these times are called "animation triggers". The most common trigger is "Scrolled Into View": this means the animation will play when the element comes into frame as the user is scrolling through the page.
Replo comes with several pre-built animations that you can use to animate any component:
- Fade In/Out
- Slide In/Out
- Flip In/Out
- Grow
- Grow Big
- Shrink
- Shrink Big
- Spin
Configuring Animations
When you've added an animation to a component, you can configure it directly in the editor.
- To configure the duration of the animation, drag the duration slider or type into the duration field. Durations are measured in milliseconds, so a duration of 1000ms means 1 second. Higher duration means that the animation will take longer to complete.
- To configure the delay of the animation, drag the delay slider or type into the delay field. Delays are also measured in milliseconds. A longer delay means that when the animation trigger happens (for example, when the component is scrolled into frame), the animation will wait for the delay before playing.
- Some animations have other options that you can configure. For example, the "Slide In" animation has a "side" option that you can set to configure which direction the component will slide in from.
- You can choose to toggle an animation to run only once. This prevents an animation from be replayed when the content is scrolled out of the viewport, and then back into it.
Enabling Animations for certain screen sizes
By default, animations on Replo components are enabled for every screen size. You can change this by selecting which screen sizes you want the animation to play on.
To add different animations for different screen sizes, you can have two animations where each one runs on a different screen size:
- Add an animation on Desktop, and click on "Tablet" or "Mobile" to deselect the ones you want a different animation for
- Use the Device Preview to change the device to mobile (or whichever screen size you want)
- Add another animation, and click the "Desktop" button to deselect it so that the new animation doesn't play on Desktop. There are now two separate animations: one for desktop, and one for the device size you selected.