Using the Animation addon
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

With the animation addon, you can give your elements and sections life by configuring a variety of effects that are initiated by events such as loading, scrolling, clicking, and hovering. You can use our predefined animations or combine our wide range of effects to make your own animations by controlling their parameters and choosing how and when they should animate.

Adding an Animation addon

From The Top Menu

  1. Select the element you'll attach the addon to

  2. In the top menu, click on Attach addon to element

  3. Search for and select Animation

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

By right-clicking

  1. Right-click the element you want to attach the addon to

  2. Select Addons

  3. Click Add new

  4. Search for and select Animations

From the Addon tab

  1. Click the element you want to attach the addon to

  2. Click Addon (next to Style) in the right-side panel

  3. Select Animation

  4. Click Apply addon

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

Removing an Animation addon

  1. Select the element the addon is attached to

  2. Click on the Transition icon next to the element in the layers panel

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

The addon has been removed from the element.



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 have the following parameters:

  • Duration: The duration of the animation

  • Delay: The interval before the animation starts

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

  • In view: Select to make the animation run every time the element is viewed

  • Loop: Select to make the animation loop continuously

  • Loop Alternative Direction: Select make the animation loop forward and then backward continuously

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

The 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

  1. Click the animation icon next to the element in the layers panel

  2. Open the settings of your animation

  3. Click on the + Effect button

  4. Select the desired effect

The parameters will display below so you can configure them.

Removing an Animation Effect

  1. Click the animation icon next to the element in the layers panel

  2. Open the settings of your animation

  3. Click the X icon next to the effect you want to remove

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.

  1. Select the element the addon is attached to

  2. Click the Transition icon next to the element in the layers panel

  3. Configure the addon

  4. Click on the + icon at the top of the panel

  5. Write the shared style name

  6. 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.

Deleting Shared Presets

Shared Presets cannot currently be removed from the settings panel. You have to do this from the addon's overview, before adding the addon to an element.

  1. Select an element to which this addon isn't applied

  2. In the right side panel, click addons at the top

  3. Search for and select Animation

  4. At the bottom of the addon's overview, click the three dots next to your preset

  5. Select Delete

Setting Different Animations Across Breakpoints

You can modify how your animations behave depending on the breakpoints. The settings you apply to your Main breakpoint will be inherited by the rest initially but you can go and edit the addon in each breakpoint independently.

  1. After setting the animation in your main breakpoint, switch to the breakpoint where you want your animation to behave differently

  2. Open the settings panel

  3. Remove the unwanted effects

  4. Add the new effects and set them

Note: For the last 2 steps you can refer to the Adding/Removing animation effects sections above.

These changes will only be applied to that specific breakpoint the rest of the unedited breakpoints will still be inheriting their settings from the main one.

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.

  1. Select the element the addon is attached to

  2. Click the Transition icon next to the element in the layers panel

  3. Click on the copy-paste icon at the top of the panel

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

  5. Click the copy-paste icon at the top bar

The addon will be added to the element.

Did this answer your question?