Mac SEO Blog

The latest version of EverWeb – version 4.4 – adds a number of important design tools that will help you create even more incredible websites! From Containers to borders and scrolling effects to navigation menu fill types, we believe that our latest update will give you immense creative freedom.

One extra set of new features comes with the addition of the new Mouse Transitions and Animations feature. This is located in the revamped Shape Options tab section of the Inspector Window on the right hand side of the EverWeb UI.

Why Use Mouse Transitions and Animations?

Using mouse transitions and animations can be a great way to help focus your visitors on either your content or on the ‘Call to Actions’ within your pages. The key to using this kind of feature is to use it sparingly. This is for a couple of reasons: the first reason is that you will want to alert your visitors to what is important (from your perspective) as they are mousing over the page. If you have too many transition or animation effects in place, then what you want your visitor to focus on will be lost. So, in this instance, less is more. The second reason for using these effects sparingly is that the more effects you use, the more it will drag down the performance of your page. Keeping your page performance snappy is always good as this helps keep your visitor in your site. In situations where a page is slow to load, you are more liable to have your visitor click away from your site.

Mouse Transitions and Animations In Action

You can add a mouse transition or animation to virtually any object. Typical case uses are for call-to-actin type scenarios e.g. buttons or text that you want visitors to be aware of when they mouse over them. Simply select the object that you want to use an animation or transition with then go to the Shape Options tab in the Inspector Window. Check the checkbox to the left of the section title “mouse Transitions & Animation to activate the settings.

The first field to look at is Transition Time which is the time that it takes the effect to complete. You can set the value for this field from zero to 500. The higher the number, the slower the effect plays out. The next two fields are both dropdown menus with the same contents in each. The Mouse Over and Down Animation dropdown menus have 41 different effects to choose from. You can trigger the effect for either a mouse over or mouse down event, or for both events if you want. As previously mentioned, using these effects sparingly is often more effective, so our recommendation is to use one effect only on an object rather than both.

When applying effects, be careful of the object that you apply them to, and the type of effect that you use. For example, applying an effect to a Navigation Bar Widget may be more annoying than entertaining… With this in mind, we recommend that you test out your animation effects before you publish your site to make sure that the effect you have chosen is appropriate to the object on the page. Once you have tested, and are happy with the effect, publish your site.

Other Useful Mouse Over and Mouse Down Effects

Whilst Mouse Transitions and Animations Effects are new to EverWeb, there are also some effects that can be used from earlier EverWeb versions. Whilst in the Shape Options tab, take a look at the Fill section near the top of the settings. Here you will see a dropdown menu, which by default is set to ‘Normal’. This dropdown represents the state of the mouse when it is not in a mouse over or mouse down state. If you click on the dropdown, you will see options for ‘Mouse Over’ and ‘Mouse Down’. If, for example, you set the dropdown menu to Mouse Over, you can now set options in the Shape Options tab for this specific mouse state.

The easiest example is where you have a button on your page that you want to change color when your visitor hovers, or mouse overs it. To make this happen, first select the button shape then change the Fill section’s dropdown menu from Normal to Mouse Over. Next, change the Fill menu from ‘None’ to ‘Color Fill’. Once you have done this, change the color swatch to the color you want when the visitor mouses over the button. You are now all set! You can test this out directly in the Editor Window just by hovering over your button shape to see it change color.

EverWeb’s new Mouse Transitions and Animation feature is super easy to use and when combined with existing effects, also expands your page design possibilities.