If you’ve been building along with the previous three articles, you will have now created an interactive website in Vev from scratch utilizing some basic design principles along the way. This article is all about taking that site to the next level using Vev’s additional elements and add-ons.

Add-ons open a whole new world of interactivity to your Vev projects. From animation to lazy loading, you can add unique enhancements to Vev components to bring your project to life.

To add an add-on, click a component (sections or elements) and click the puzzle-piece icon that appears in the top menu. This will open a library of all the add-ons you can apply.

In our interactive website example, you can see that we have a mixture of elements scrolling at different speeds, creating a unique parallax effect. To achieve this, we’re going to add the scroll speed add-on to all of the elements in the first section of the project and set them to different speeds.

Select an element, click the add-on (puzzle piece) icon from the top menu, and select “Scroll speed”. Once added, the configuration menu will open automatically to allow you to adjust the settings.

Note: To adjust the settings of an addon already applied to a component, you can click on the element and the relevant add-on icon will appear in the top menu. Clicking this will open the configuration menu. Alternatively, you can see add-ons applied on the element within the left-hand Layers panel.

You can achieve the desired effect by applying the add-on to multiple elements and setting them all to different scroll speed percentages. Change the percentage to a minus value to make an element moves in the opposite direction to your scroll.

Note: You can easily copy and paste add-ons by selecting the copy button in the configuration menu, exiting the menu, selecting the element you want to apply, and clicking the paste button via the top menu.

To add further fluidity to this section, we’re going to add mouse move parallax to our shapes. Just like the Scroll Speed add-on, we’re going to select the desired element (in this example, a Shape element), click the puzzle-piece icon from the top menu, and select “Mouse Move Parallax”.

Open up the configuration modal to adjust the movement factor and select whether the shape should move with or against the cursor.

Vev’s animations are a great way to bring instant movement to your page—creating a dynamic visual experience with very little effort.

To apply to components, just select “Animation” from the add-on menu. This will open the contextual modal, where you can play with four different types of animation triggers: Load, Click, Hover, and Scroll. If you really want to, you can even combine all four.

When selecting a trigger, you can choose from a list of preset animations or create your own by selecting “Custom”.

💡 Learn more about adding animations

The Show/Hide add-on allows you to create custom triggers that make the target element visible when clicked. This allows you to create interactive pop-ups, as well as more complicated configurations such as a table with multiple tabs that change content.

When applying show/hide to an element, it’s important to remember you need to apply it to the component that you want to appear and disappear, not on the trigger itself. Within the configuration modal, you can choose whether you want the component to show by default, as well as set the triggers for the element(s) that you need to click in order for the content to appear.

Note: In order for an element to appear within the list of triggers, they need to be named from the left-side Layers panel.

Step 1: Scroll Speed

The diagram below highlights all the elements using the Scroll Speed add-on in the first section of our interactive website project, as well as their set values.

First, select each of these elements and add the scroll speed from the add-on menu. Remember, you can also copy and paste add-ons to other elements in the project.

With the add-ons attached, go into the configuration menu for each of these elements. To create the parallax effect of things moving at different speeds, you’ll need to ensure the values for each of the elements are unique. As the image above shows, we have used a mix of positive and negative values so that elements scroll in different directions.

Step 2: Mouse Move Parallax

Next, we have the Mouse Move Parallax. This has only been added to the shapes that appear in this section. We’ve kept the default setting of “1” for the movement factor on all shapes, but have only turned "Move against cursor" to “on” for certain shapes, as highlighted below.

Step 3: Animation

To ensure we use animation subtly, we’ve only applied the Animation add-on to two components in this top section: the first is for the ‘90s-style window at the top of the section; the second is for the labeled image lower down in the same section.

In the diagram, we have highlighted the options we have used with the load trigger. It’s important to note that you need to apply the animation to the frame, not to the individual items within it.

We have applied the same settings to the Labeled Image frame lower down this section. Feel free to copy and paste the settings from the first frame.

Step 1: Mouse Move Parallax

Once again, apply the Mouse Move Parallax add-on to the shapes with a mixture of the “move against cursor” option turned “off” and “on”.

Step 2: Animation

Next up, we’re going to apply a load animation to the ‘90s-style browsers housing our founders. This time, however, we’re going to stagger the animations so that they load one after another. Again, you will need to apply the animation to the frame itself.

Copying the animation settings from the first section, we’re going to apply these to all three of these frames but adjust the delay for each one.

Step 3: Show/Hide

Create a new group using the ‘90s-style web browser frame (copy/paste from section 1 in this project) and include a video inside. This will sit in front of the image collection of our founders. Next, apply the Show/Hide add-on from the top menu.

Within the Show/Hide configuration modal, keep the “show by default” option off, as we only want the content to appear when the button in this section is clicked. Below this, set the show trigger to be the “Find out More” button that sits in this section, and the close trigger to be the red circle in the top-left of the video’s frame. As mentioned previously, you need to ensure that these elements are given unique names in the Layer panel for them to appear within the list of triggers.

Finally, set the animation option for how this content should appear and disappear. In the example, we have used the “fade” option.

Step 1: Animation for Section 4

In the second of the three scrollytelling sections, apply the Animation add-on to the ‘90s-style browser group. From the preset dropdown, select “Slide in from left”. We’ll then make a couple of adjustments to this preset. First, adjust the duration to 1.2 seconds to slow down the animation speed. Then, change the “from X” axis from -300px to 300px. This adjusts the direction that the animation plays, so now it will slide in from the right.

Step 2: Animation for Section 5

Next, we’ll apply this animation to the image group in the last of the three scrollytelling sections. Just like before, we will apply the “Slide from left” preset, but this time we will only adjust the duration to 1.2 seconds.

Step 1: Animation

For the last step, we’re going to simply add animation to the ‘90s-style frames in sections 6-8 using the preset “Slide in”, keeping the default settings.

Thank you for joining us on this Build with Vev: Interactive Website series! We really hope this has given you a better idea of how to apply some of the web’s most popular interactive design techniques to your own projects in Vev.

You can find the complete template for today’s interactive website inside Vev to take a closer look at how all the sections we’ve covered fit together—and easily copy sections to your own projects to make them your own.

Check out vev.design/learn for more Vev walkthroughs, tips, and demos.