Web Design Tips: Animating Your World

Designing with Wix | June 30th 2010

Adding animation to your website design can take your website to the next level – let’s face it: animation gets noticed! Using Wix to add animation to your website is easy, so easy that we just want to make sure you don’t get carried away ; )

  • Try not to make animation the centerpiece of your web pages. Animation should be purely decorative.
  • Keep in mind that animation takes longer to upload, if you overdo it, it will slow your website to a crawl.

Most people come to your website for
content, not just to admire your creative skills. So use the animation to your advantage:
  • Posting animation near important text will automatically draw attention to it.
  • Use it in your introductory page (the welcome/landing page) to generate excitement before entering your website.

Now all is left to do is choosing the right animation!
Ready Made Animation
Wix offers ready made animations, so check them out and see if they fit your website design
  • Go to “Clip art”- Choose animations
  • You can manipulate the color of the animation just like any regular clip art, using different effects

1. Any graphic element can be animated
2. Click on the bottom tool bar on “animations”
3. All the options are illustrated

4. Choose your animation and adjust its settings
5. Notice that the animation won’t appear on your stage, you must click ”preview” on the top right in order to see the movement

Wix Editor - Animation Manipulation in Web Design

Animation Effects
The Particle effect
  • Choose your element
  • Click on “effects” and go to the second page
  • Choose the particle animation that suits you: canon, matrix, shuffle or contour. Notice that choosing one of them will give you a live preview on the element that allows quick experimentation
  • Once you’ve chosen the effect a new window will open and you can browse the different particles and play with the settings. The preview will automatically appear to each adjustment you make.
  • Notice on the bottom right you have the ability to change the blending mode of the particle. Learn more about the ‘blend’ effect.

Wix Editor - particles

A Fun Quick Tip

If you’d like a subtle particle effect without using a particular graphic element try this:

  • Go to “Clip art”- choose a shape
  • Apply the particle animations as explained above
  • Go to the shapes settings and set its transparency to 0.
  • Now you can freely play with the particles and place them anywhere you’d like on the page.

Check out the effect you can achieve when applying the blend mode to the particles. Wow!



Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>