.png)
Looking to elevate your site to make it stand out from the crowd? You can add animation to any element- from titles, buttons, images, text and everything in between-on your Wix site and create amazing, eye-catching effects. Whether you opt for full-screen moving images or subtle hover effects, hints of animation will add an impressive touch to your site.
How to add animation:
Go into the site you want to edit
Chose the object you want to add animation to – this can be basically anything. Text, a color block, and icon, a photo, etc.
Once you click on the object, you’ll see a circle appear that looks like this:
Click the circle
Choose the type of animation you want to add to your site – you can test them all by hovering over each one.
Click the animation you want to add.
You can leave things here, or you can customize the animation. If you want to customize, click the animation you want, and then click customize at the bottom of the window.
Here you can choose the direction the animation comes from, how long it lasts, how often it happens, and more.
Once you’ve set your animation, go into preview mode and test things out.
That’s it! You just added animation to your Wix site.
If you would like the animation to only run when the element is first loaded, click Customize and click the Only animate first time toggle.
You can set different animations for your elements on the desktop and mobile sites; just follow the steps above in the desktop and mobile Editors. If you do not set an animation for the mobile site, the desktop animation is displayed.
Animations added to elements in the header are only displayed when the element is first loaded.
Animation Tips from the Pros
1. Don’t go animation overboard
Remember to keep it simple. Animations are a great design choice, but just a few will do the trick. Too many could confuse users. Also, animation overload could interfere with your website's load time. No one wants a slow website
2. Choose the right time, right place
Pacing the animation on your page will mean that it’s not revealed all at once. You can achieve this by choosing the animation effect that works best for any certain element (text, image, or button), and customize the speed. Often when motion is too quick, it can make users feel uneasy. When it’s too slow, users can feel out of control. Balancing animation timing is key to creating your message.
3. Be subtle
Create animation that moves smoothly without distracting from the main message of your site.
4. Have fun
Follow your imagination and have some fun with adding animation elements. Your visitors will, too!