Mac SEO Blog

Adding animation to your website can add flair and fun to your site. Animating an object on your page can also serve a practical purpose as a ‘Call To Action’ for your visitors. By drawing a visitor’s attention to a particular object, such as a button, you may help increase the likelihood of the visitor clicking on the button.

About Animation Effects in EverWeb

You can use animation effects in any page layout type in EverWeb, Responsive or Fixed Width, by selecting the object you want to animate, clicking the Animation box in the Shape Options tab, then applying the animation effect that you want. you can apply an animation effect to most objects in EverWeb, the exception being the Image Gallery widget.

EverWeb includes sixteen different styles of animation of which six, Bounce, Fade, Flip, Rotate, Slide and Zoom, can have additional have directional control added to give the effect movement within the page. The movement controls are From Top, From Left, From Right and From Bottom.

Each animation can have a duration set, in intervals from 1/10th of a second up to 60 seconds. The longer the duration, the slower the animation will play out. You can also add a time delay before the animation starts, again from 1/10th of second, this time up to 100 seconds. Delay is useful when you have a number of objects that you want to activate in a timed sequence. Finally, you can set the animation to repeat, from one time only to up to 100 times.

Animation in Fixed Width Sites

When using animation in a Fixed Width (i.e. Centered or Left Aligned) Page Layout style, you can use all of the animation’s directional controls (From Top, Left, Right and Bottom) if using one of the six animations styles mentioned above. For example, you could have animated clouds crossing the page from left to right, or have titles drop in from the top of the page.

In addition, as you can stack objects on top of each other in a fixed width page. you can create ‘reveal’ effects by using the Fade animation style. This is a ‘Fade In’ animation so you can use it to make a fade out by creating a rectangle shape in the same color as the background and have it fade in over the object that you want to disappear. Check out our Animation Effects Part One and Part Two YouTube videos for more information on what you can do with animation!

Animation in Responsive Websites

Animation works in the same way in Responsive Page Layouts as it does for Fixed Width Page Layouts except for a couple of differences. The first thing is that it is not possible to stack objects in a Responsive Page Layout as you can in a Fixed Width layout. However, you can use the Fixed Position setting in the Metrics Inspector to fix a full width shape in place that can fade in over a full width shape placed over it. This will achieve a fade out effect.

The second thing to be aware of is that when using any of the six animation styles that include directional control, you should avoid using ‘From Left’ and ‘From Right’ direction controls. When using these direction controls, the object itself is placed at the left or right starting point of the animation from which it then moves in to the page when the animation begins.

As such, the object will be outside of the page’s left or right margin prior to being animated and so the page width will be greater than the width of the browser it is being displayed in. The result is that the page will drift horizontally to the left or to the right within the browser window instead of being fixed in place.

The third thing to be aware of is that when using a Responsive Row widget, you can add the animation to the widget itself and to the objects inside it. This may help you produce some interesting effects, but testing is vitally important to ensure that your animations work correctly on all device types!

Conclusion

Using animation in EverWeb’s responsive page layout style can provide some great effects to your page. However, it is important to thoroughly test your page to make sure that the animation you want works correctly under all circumstances. The best way to test is to always preview your page. If your browser supports responsive design mode, you should be able to test your page on a variety of different device sizes to see whether it holds up or not. If your browser does not support responsive design mode, it is recommended to use Apple’s Safari browser which does support this feature.