Compatibility:

WebSite X5 Evo and Pro

Details are important if you want to make your web page more attractive and interactive. The Animated Box 2 Optional Object is an advanced tool you can use to highlight important information with animated boxes, adding a modern and creative touch to your website's design.


With Animated Box 2, not only you can use customizable masks and preset effects with a set of easy-to-use parameters, but you can also import and use custom SVG mask for more creative flexibility. Whether you want to display your portfolio, showcase your customers' reviews or highlight the benefits of your products, this tool allows a combination of a dynamic design and advanced functionalities for professional and elegant results. Check out some examples on the Preview page. 



Elements of animated boxes

The animated boxes you can create with the Animated Box 2 Object feature a fixed structure built around the following elements:

  • Background: This is the container that defines the shape of the box and houses all its contents. It can be customized in terms of colors, dimensions, and optional graphic effects to perfectly match the design of your webpage.
  • Mask: This is the SVG graphic element that is animated with a morphing effect. You can select a predefined mask or customize it by adding the parameters of an SVG file specifically created for your project.
  • Content: This is the central part of the box, where you can insert a title, text, and a button. The content is also animated with transition effects and dynamically adapts to the mask, ensuring seamless visual integration and a harmonious overall effect.

It’s important to note that you can associate an action with the box, such as linking to a page, downloading a file, or opening a popup. Additionally, the animation effects are always triggered by mouse hover.


How to set up animated boxes

Now that you have a clearer understanding of the elements that make up an animated box, let’s start defining its general settings:

  • Double-click on the inserted Animated Box 2 Object to access the settings window.
  • Stay in the General section and begin by setting the box's dimensions in pixels.
  • Once the size is defined, use the available options to design the box's borders: you can adjust the colors, thickness, corner rounding, and shadow.
  • If needed, set up a Link: click the button and choose the action to be executed. The link you configure will be active across the entire box area, not just on the button.


How to define the animation for the boxes

Once the box is set up, we can focus on the animation aspects. As previously mentioned, the overall animation includes a combination of effects, such as a transition effect on the content and a morphing effect on the mask. These can be customized through the options in the Effect section:

  • The transition effect on the content involves a vertical movement from bottom to top. By increasing the value of the Offset parameter, you can make the text appear lower and perform a larger shift, eventually positioning itself at the top of the box.
  • The Duration determines the total time of the entire animation. Adjust it to make the animation faster or slower.
  • The Animation Type allows you to choose the mask to apply to the box: you can remove it by selecting 'None,' pick one of the predefined options, or select 'Custom' to use your own SVG mask.
  • In addition to the mask type, you can also select the Interpolation method. This defines how the morphing will take place, transitioning the mask from its initial state to its final state.


How to define the style for the single elements

We mentioned that animated boxes are made of different elements. You can decide whether to display them or not and define their style.

  • Go to the Elements section and use the dropdown menu to select the element you want to configure.
  • For the Background, you can choose either a color or a background image. Keep in mind that the image can be selected from both online libraries and those saved on your PC. If you want the imported image to automatically adapt to the box's dimensions, simply enable the Adjust size option. Finally, set the Opacity of the imported image for both the normal state and the hover state.
#tip - By reducing the opacity of the image, you make it progressively more "transparent," allowing the background color underneath to show through. To add a Fade effect to the overall animation of the box, simply set different opacity values for the normal state and the hover state of the background image.


  • For the Mask, you can define the color for both the normal state and the hover state. If you want to add a touch of three-dimensionality, you can also apply a shadow.
  • The Title and Description offer the same customization options. You can write the content, set classic formatting options, define the color for both the normal and hover states, and finally, adjust alignment and margins.
#tip - To remove the title and/or description, simply leave the content empty. However, if you want these elements to appear/disappear during the animation, you can make the text invisible by setting the color to 'Transparent' in either of the two states.  


  • For the Button, you have the same customization options as for the Title and Description. The only difference is that, in this case, you can define a color for both the text and the background. The button, however, will always appear and only on mouse hover.

 

How to create a custom mask

As we've seen, the box animation also uses a morphing effect applied to an SVG mask.


For those who may not know, SVG (Scalable Vector Graphic) is a vector format that can be read on web pages. This format is especially used for illustrations, icons, and logos (not for photographic images) because:

  • It has a smaller file size since the files are not representations of a pixel grid, but rather a set of tags/codes.
  • It can be modified via CSS, allowing for effects such as color changes on hover.
  • It can be resized without losing quality.
  • It supports the application of animations to shapes, enabling effects like SVG Morph.


Having made these premises, how do you create and use your own SVG mask for the animated box you're setting up with the Animated Box 2 Object? Let’s go through the steps:

  • First, you need to open a vector graphics program such as Softonic Inkscape, Adobe Illustrator, Affinity Designer, or even the classic Adobe XD, Figma, Sketch, etc. Any platform that allows you to create paths can be used to export an SVG file.
  • Once you’ve selected the program, you need to draw two shapes: the first one is for the mask in its initial state, and the second one is for the mask on hover.
  • For both masks, starting with the drawn polygon, you need to convert it into a path. For example, if you're using Inkscape, you can do this by selecting the object and using the command Path > Object to Path. You can view the SVG code directly in the window accessed through Edit > XML Editor.
  • If your graphic software doesn’t allow this mode of viewing, you can simply save the two SVG files and then open them in a text editor like Notepad to view and copy the data.

Here's an example for a SVG code:

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="320" viewBox="0 0 180 320">
  <path id="Path_1" data-name="Path 1" d="M 180,160 0,218 0,0 180,0 z"/>
</svg>

As you can see, the structure is very similar to HTML, with different tags. The key elements in the code are the values of 'viewBox' and 'd' (path data): in the example, these values are highlighted in yellow.

  • Now, you can return to working in WebSite X5. Open the Animated Box 2 Object. For the Animation Type, select 'Custom' and choose the Interpolation method you prefer.
  • Enter the viewBox values into the appropriate field.
  • Copy (CTRL+C) the 'd' value from the SVG code of the initial mask and paste (CTRL+V) it into the Initial Mask field.
  • Similarly, copy (CTRL+C) the 'd' value from the SVG code of the final mask and paste (CTRL+V) it into the Hover Mask field.
#tip - For both the viewBox and the Masks, you only need to enter the values of the viewBox and d elements, that is, the content between the opening and closing quotation marks (excluding the quotes). To avoid transcription errors, it’s best to copy (CTRL+C) and paste (CTRL+V) these values.


As you can see, by "turning on" or "off" elements and working with colors and effects, the possible variations are truly endless. With some experimentation, you'll find an original and perfect solution for the pages of your site.


#tip - You want a different kind of animated box? Check out the Animated Box Object.  



Are you curious to use this Object on your website pages? Install Animated Box 2 now.


You don't have enough Credits to buy this Object? Check out our Credit Packs