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 and then choose the Appear option.

Appear

Once the Appear option is chosen, the selected object from the website will have an instant applied 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.

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.

On Scroll

This trigger applies once the user starts scrolling the webpage.

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us