EverWebSoftwareTips and TricksTutorialsWeb DesignWidgets

Creating Animation Effects in EverWeb

The new animation effects in EverWeb version 2.2 are great for bringing your web pages to life. The effects can be used to highlight areas of your web page that you want your visitors to focus on – essentially creating ‘Calls To Action’. EverWeb’s animation effects can also be used to ‘tell a story’ whereby you trigger effects in sequence to produce a flow of action for your visitor to follow.

Creating an Animation Effect
Animation effects are added to objects. You can animate text boxes, shapes, images and most widgets. The RSS Feed, Image Gallery and blog widgets used for blog posts, blog main and archive cannot be animated.

To animate an object in Everweb

  1. First select the object you want, then go to the Shape Options Tab in the Inspector Window.
  2. Note that animations can be applied to more than one object at a time and even to grouped objects
  3. Once you have selected your object(s), tick the box in the ‘Animation’ section of the Shape Options Tab to activate the animation options.
  4. From the first drop down menu, select the type of animation you want. At the bottom of the Animation section is a Preview window so you can see what the effect will look like when you select it.
  5. The last option in the first drop down menu list is for ‘Other.’ Use this option for an additional list of animation effects that are displayed in the second drop down menu.
  6. Once you have chosen the effect you want from the first drop down menu, use the second drop down menu to further customize the effect you have chosen. If you have selected ‘Other’ from the first drop down menu, you will only see a list of other animation effects instead of a list of customization options.
  7. After selecting your choices from the drop down menus, set the animation ‘Duration’ using the slider, by entering a number in the field entry box or by using the up/down arrows. The number shown corresponds to seconds and milliseconds. When selecting duration, the longer the time you enter, the slower the effect takes to complete.
  8. The ‘Delay’ option should be set if you do not want the animation to start immediately as the page loads or when the object scrolls on screen.This option is useful if you have a number of effects on a page and you want to ‘stagger’ them (e.g. if you are ‘storyboarding’.)
  9. The last option is ‘Replay’ which animates the object the number of times you specify.

Animation Effects in Practice
When using animation effects, use Preview to view how the effect(s) will look as effects do not animate when you are in the page design itself. It’s recommended to use the File-> Preview menu (or the Preview button) to view your animations before publishing so you can see how the end result will look. This is important especially if you have a number of animations that run one after the other. It’s also important to see if the animation is appropriate to the page and that its playback speed is correct. Use the Duration, Replay and Delay options to tweak your animation (even by milliseconds!) to get the right effect.

Animation Example: Fade Out Effect
One of the animations that EverWeb includes is a Fade effect. This is a fade IN effect. If you want a fade OUT effect instead, try the following:

  1. Create a blank page with a white background.
  2. Add a Text Box (from the Toolbar) and enter some text in it. Style the text as you want.
  3. Next, add a rectangle shape, again from the Toolbar.
  4. Move and size the rectangle so that it covers the text of the Text Box.
  5. With the rectangle shape still selected, go to the Shape Options tab.
  6. Set the ‘Color Fill’ of the rectangle to be White, the same color as the page background.
  7. Tick the box next to ‘Animation’ so you can access the ‘Animation’ options.
  8. Set the first drop down menu option to ‘Fade’.
  9. Set the second drop down menu option to ‘In Place’ which is the usual default option.
  10. Set a Duration of 1.5 which will give a fairly fast fade speed to the rectangle.
  11. Set a Delay e.g. 3.0 seconds.
  12. Leave Repeat set at 1.
  13. Preview!

What you will see in the Preview is that the text appears, but gradually fades away as the rectangle shape fades in!

This is only one example of how animation effects can be used in EverWeb. To get the most out of them I would recommend thinking of what you want to achieve then play with the effects, duration, delay and repeat options until you get the desired effect!

if you have an effect that you have created why not share it with us, or if you want to create an effect but don’t know how, let us know in the comments below!

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *

More in EverWeb