Adding an Animation addon

Configuration options

Removing an Animation addon

👍🏽 Adding an Animation addon

From The Top Menu

  • Select the element you'll attach the addon to

  • In the top menu, click on Attach addon to element

  • Search for and select Animation

The settings panel will automatically open so you can customize it.

By right-clicking

  • Right-click the element you want to attach the addon to

  • Select Addons

  • Click Add new

  • Search for and select Animations

Tip: A Transition icon will appear next to the element in the layers panel indicating that it's been added.

⚙️ Configuration Options

Animation Types

You'll have the option to select from a number of animations, each of which will be triggered by different events on your website. Read the chart below to learn how they work.

Animation Type

Description

Load Animation

The animation will be initiated as the page loads

Click Animation

The animation will be initiated when clicking the element itself or one of the specified triggers in the settings

Hover Animation

The animation will be initiated when hovering over the element itself or one of the specified triggers in the settings

Scroll Animation

The animation will be initiated as you scroll on the page

Animation Presets

You'll be able to choose from a variety of animation presets so you don't have to start from scratch, some of these presets won't be available for certain animation types.

Have a look at the list below to learn what they do.

Preset

Description

Available for

Slide-in

Brings the element into view by moving it vertically with a fade effect

Load Animation

Click Animation

Scroll Animation

Slide-in from left

Brings the element into view by moving it horizontally from the left with a fade effect

Load Animation

Fade In

Makes the element appear smoothly

Load Animation

Pulsate

Makes the element scale up and down continuously

Load Animation

Click Animation

Hover Animation

Change bg color

Changes the element background color

Load Animation

Click Animation

Hover Animation

Scroll Animation

Stagger slide-in

Makes the elements inside a frame slide in vertically and scales them up

Load Animation

Scale Up

Makes the element scale-up

Click Animation

Hover Animation

Fade-in stagger

Makes the elements inside a frame fade-in randomly

Scroll Animation

You can still tweak the functionality of a preset and add more effects to it.

Custom Presets

You can also make your own animations from scratch by using Animation Effects. You'll be able to add as many effects as you need to make the necessary changes to your element during the animation transition.

There are several available effects and it's important to understand how they work before you start configuring them. Please refer to the section below to learn more about them.

Custom Animation Effects and parameters

All animation types has folllowing parameters:

  • Duration: The duration of the animation

  • Delay: The interval before the animation starts

  • Easing: Adjust the acceleration of the animation's transition

  • Loop: Toggle to make the animation loop continuously

  • Run once: Toggle to make the animation run only once

  • Scroll animation has a few extra parameters:
    Position
    Offset start
    Offset end

    This illustration shows the relationship between these settings:

Or check out https://vvv.vev.site/positionoffsettest/ for an interactive demonstration.

Effect

Description

Parameters

Background

Change the background color of the element

Background color: Choose the color from the color picker

Border radius

Curve the radius of the element

Border-radius start: The border-radius value when the animation starts

Border-radius end: The border-radius value when the animation ends

Color

Change the color of the element

Color: Choose the color from the color picker

Move Horizontal

Make the element move horizontally

From X: The horizontal position of the element when the animation starts

To X: The horizontal position of the element when the animation ends

Move Vertical

Make the element move vertically

From Y: The vertical position of the element when the animation starts

To Y: The vertical position of the element when the animation ends

Opacity

Change the element's transparency

Opacity Start: The transparency of the element when the animation starts

Opacity End: The transparency of the element when the animation ends

Rotate

Rotate the element

Rotation: Set how many degrees the element should rotate

Scale

Make the element scale-up

Scale element: Set how much the element should scale in rems

Stagger

Make a number of elements fade in/slide in randomly inside a frame

Stagger: The time every element takes to appear in seconds

From: Choose the order the elements should appear based on their position inside the frame (first (top), last (bottom), center)

Adding an Animation Effect

  • Click the Transition icon next to the element in the layers panel

  • Open the settings of your animation

  • Click on the + Effect button

  • Select the desired effect

The parameters will display below so you can configure them.

Shared Presets

You can save the settings of an addon and reuse them as many times as needed in your project, follow the steps below to learn how to save them.

  • Select the element the addon is attached to

  • Click the Transition icon next to the element in the layers panel

  • Configure the addon

  • Click on the + icon at the top of the panel

  • Write the shared style name

  • Click on the checkmark to save

Click the No shared addon preset dropdown every time you want to reuse your preset, the name you gave it to it will appear in the list.

Tip: Shared presets will only be available for the specific addon you are working with.

Copy-pasting an addon

You can also copy and paste an addon from one element to another but unlike Shared Presets the settings aren't saved and you'll have to copy the addon from the element it's attached to every time you want to reuse it.

Follow the steps below to learn how to do this.

  • Select the element the addon is attached to

  • Click the Transition icon next to the element in the layers panel

  • Click on the copy-paste icon at the top of the panel

  • Close the settings panel and select the element into which you want to paste the addon.

  • Click the copy-paste icon at the top bar

The addon will be added to the element.

Removing an Animation addon

  • Select the element the addon is attached to

  • Click on the Transition icon next to the element in the layers panel

  • In the settings panel, click on the trash icon on the top right corner

The addon has been removed from the element.

Did this answer your question?