In my last blog about Scroll Magic (scrollmagic.io) I talked about a few things that will really help ease the stress of creating animations for your website. There were a few things I left out so I would like to complete the list with a few more tips: Using Unique Divs and Keeping Animations Subtle.
Unique Divs
One of the biggest things I have found for simplifying the creation process of large SVG animations is to put each element in its own unique div. Putting each SVG element into its own div has a few advantages. First off you can break up the steps of coding your animation. Rather than working with one giant SVG image that can be really difficult to look through in the inspector you can break it up and work with it piece by piece.
Breaking up the SVG elements in this way makes changing the code or reusing the code much easier because each element has its own file that you include into the project whenever it is needed.
Also if you are copy and pasting from a program like illustrator it is easier to change the css classes to ensure they don’t affect other elements. You can simply add the surrounding div’s id to each css class definition to ensure it doesn’t spill out to other elements that may have the same class name.
Keeping animations Subtle
Animations can help make your website stand out but they can also overwhelm the user and make your site difficult to navigate. No one wants to have a button that is continually moving and hard to click on. Try to keep animations simple. If you want a button to move to draw attention to it, have the animation trigger once when the user can see it but then not move anymore so that it can be clicked easily.
Animations as Easter Eggs
Other animations can just add some flash to show your users you really put the time into your website. For example did you notice the animations on the icons on the front page of this website? If you haven’t been there yet check them out. If you have already been to our home page you may not have even noticed the animations. They are just simple enough that they might not even be noticed but that’s ok. Animations can act like easter eggs on your website. Small little gifts you leave your users if they are willing to look close enough.
You can also use animations to draw attention to things but I will stress again that they should be kept simple. Too much animation makes sites confusing and difficult to look at. Users will quickly be overwhelmed and leave your site.
These are just a few tips to get you starting in the big world of website animations. Hopefully they help you avoid some of the frustrations I had when I first started working with animations. My next Scroll Magic blog will walk through building a simple animation. So if you haven’t made an animation before keep your eyes open for the new blog.
