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.

Once the Animations is activated, the selected object from the website will have an instant applied Appear: Fade In animation.

Press the Edit icon to choose any Trigger or Preset from the predefined list.

To remove, press – (minus) icon.

Trigger

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

Trigger could be:


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

To preview the animation, press the preview icon (eye) in the upper right corner.

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.

Each predefined Preset (animation) has a Duration (which means how the long animation should wait until starts playing) and a Delay (specifies the amount of time to wait from applying the animation to an element before beginning to perform) between 0 and 5 seconds, the default value is 0,25 seconds for the duration and 0 seconds for the delay.

There are nine predefined presets and one additional custom option.

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.

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

There are seven predefined easing types:

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

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

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.

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

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

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.

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

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.

There are nine predefined presets and one additional custom option.

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.

There are nine predefined presets and one additional custom option.

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.

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.