Animations

Animations refer to the effects used to create movement on a website. Using the animations effect, you can add a bit of style and professionalism to your website. Below, you will find details on how to use the animations on Siter.

Create an animation

Select an element, group, or component, in fact, any object from the project and after this action, you’ll see the Animation option in the sidebar.

Press on the + (plus) icon.

You’ll be asked to select how the animation should behave:

• Appear – The animation runs once when the object comes into view.
• Loop – The animation plays continuously in an infinite loop.

Once Animation is added, the selected object will instantly have a default effect applied (either Appear: Fade In or Loop: Fade In).

Click the Edit icon to customize:

• Preset – choose from 9 predefined animation styles or create a custom option.
• Trigger (Appear animations only) – set when the animation should start: on appear, on scroll, or when the layer is in view.
• Easing – choose from 7 predefined easing options to control the speed curve and smoothness.
• Speed & Delay – adjust how quickly the animation runs and when it begins.

To remove an animation, click the – (minus) icon.

Preset

Preset define the type of animation effect applied to your selected layer. They work the same for both Appear and Loop animations.

Available options:

1. Fade in – smoothly changes opacity from invisible to visible.
2. Scale in – enlarges the layer as it appears.
3. Scale in bottom – grows upward from the bottom.
4. Flip horizontal – flips the layer horizontally.
5. Flip vertical – flips the layer vertically.
6. Slide in top – slides the layer into view from the top.
7. Slide in left – slides in from the left.
8. Slide in right – slides in from the right.
9. Slide in bottom – slides in from the bottom.
10. Custom – build your own animation using X, Y, Rotate X, Rotate Y, Rotate Z, Opacity, Scale and/or Blur.

For Loop animations, the Custom preset allows multiple steps (2 by default). You can add as many steps as needed to create unique looping effects.

Easing

Easing lets you change the acceleration and deceleration of an animation transition.

There are seven predefined easing types:

a. Linear: A linear animation provides a mechanical feel to the motion because its speed is consistent from start to finish.

b. Ease In: An animation that starts slowly and then increases speed towards the end of the movement.

c. Ease In Out: An animation that combines the behaviors of ease-in and ease-out, starting slowly, speeding up in the middle, and then slowing down again towards the end.

d. Ease Out: An animation that starts quickly and then slows towards the end of the movement.

e. Back In: An animation that starts by moving slightly backward and then accelerates as it reaches the end.

f. Back In Out: An animation that creates a bounce at the start, accelerates through the middle, and then bounces again before settling at the end.

g. Back Out: An animation starts quickly and then decelerates, overshooting its end point slightly before settling back into place.

Trigger (Appear animations only)

Each animation has a Trigger (what causes the animation to start)

Trigger could be:


1. On Appear
2. On Scroll
3. Layer In View

On Appear

This trigger occurs as soon as the webpage is loaded, this trigger is recommended to be used only for the above-the-fold section, applying to the objects below this section wouldn't shown, as this animation applies instantly.

Below are samples for each Preset.

Fade in

Scale in

Scale in bottom

Flip horizontal

Flip vertical

Slide in top

Slide in left

Slide in right

Slide in bottom

Custom

Play around with all the options, once happy feel free to preview the result.

On Scroll

This trigger applies once the user starts scrolling the webpage.

Choose the starting point (between the Top, Middle or Bottom, the animation will be displayed once the exact part of the layer appears in the browser.

You can also choose the direction between Down (scroll natural direction) and Up (back to top direction).

Toggle on the Replay option if this animation should be repeatable or toggle off to apply it once.

When the On Scroll trigger is selected, the preset options change. Instead of animating layers into view, these presets animate them out of view as the user scrolls through the page.

Available On Scroll presets:

1. Fade out – gradually decreases opacity until the layer disappears.
2. Scale out – shrinks the layer as the user scrolls.
3. Scale out bottom – scales downward toward the bottom.
4. Flip horizontal – flips the layer horizontally while scrolling out.
5. Flip vertical – flips the layer vertically while scrolling out.
6. Slide out top – slides the layer upward and out of view.
7. Slide out left – slides out to the left.
8. Slide out right – slides out to the right.
9. Slide out bottom – slides downward and out of view.
10. Custom – build a scroll-based animation using X, Y, Rotate X, Rotate Y, Rotate Z, Opacity, Scale and/or Blur.

The reason these presets differ is because On Scroll animations are reactive: they tie movement to the user’s scrolling behavior. Instead of a one-time entrance effect (like Appear), they create a dynamic exit or transformation as the page moves.

Fade out

Scale out

Scale out bottom

Flip horizontal

Flip vertical

Slide out top

Slide out left

Slide out right

Slide out bottom

Layer In View

This trigger occurs once the user reaches the area where the layer is positioned.

Choose the starting point between the Top, Middle or Bottom, the animation will be displayed once the exact part of the layer appears in the browser.

Toggle on the Replay option if this animation should be repeatable while reaching the specified layer or toggle off to apply it once.

All 9 predefined Presets and that custom one are similar to the On Appear trigger, the difference is that this trigger happens for the layers (objects) below the above-the-fold section.

Previewing Animations

You can preview animations in two ways:

1. Instant Preview
   • Click the Play button – this will show the animation only for the currently selected layer.

2. Full Project Preview

• Click the Preview (eye) icon in the top-right corner – this launches a live preview of the entire project, including all applied animations.

Note: Use Instant Preview to quickly test a single animation, and Full Project Preview to see how everything works together on the page.

Switching between Appear and Loop Animations

If you need to change the animation type:

1. In the animation settings popup, go to the top section.
2. Click on the title (e.g., Appear or Loop) or the down arrow next to it.
3. Select the desired option (Appear or Loop) from the dropdown.

This allows you to quickly switch the behavior of the selected layer’s animation without having to delete and re-add it.

Copy Paste

Each animation can be copied and pasted, press on the right click on the mouse in the animations section and copy the animation.

After choosing any desired layer and pasting it, there will be a similar animation.

The copied animation could be pasted in a similar way to the copy action, for quick paste the shortcut Ctrl + V (Windows) or Command + V (Mac) could be used.