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
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
From the Addon tab
Click the element you want to attach the addon to
Click Addon (next to Style) in the right-side panel
Select Animation
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
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.
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
Click the animation 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.
Removing an Animation Effect
Click the animation icon next to the element in the layers panel
Open the settings of your animation
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.
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.
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.
Select an element to which this addon isn't applied
In the right side panel, click addons at the top
Search for and select Animation
At the bottom of the addon's overview, click the three dots next to your preset
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.
After setting the animation in your main breakpoint, switch to the breakpoint where you want your animation to behave differently
Open the settings panel
Remove the unwanted effects
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.
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.