CALL US ⁄ ⁄   +61 3 9995 0765

0 Comments

  • SHARE

web design firm

Previously I posted an article about Enhancing User Experience with Animation. Animation in 2016 has become an essential part of the web. You can easily spot animation on any website these days. However, animating can be daunting and very time consuming. Fortunately, there are a lot of animation tools and frameworks nowadays that will help you leverage your animation process as well as save you a ton of time. Today, we will be looking at some of these animation tools and frameworks. Let’s begin!

Adobe Animate CC: Animate CC is actually Flash. Yes, Flash! You heard me right! Long gone the day when you have to live with heavy SWF files which are not supported by Apple devices such as iPhone and iPad. Animate CC now fully support HTML5 and CSS3. All you have to do is to animate just like what you used to do back in the day of Flash but now instead of exporting to SWF, you have an option to export directly to HTML5 and CSS3. First world problem solved! Good job, Adobe!

Edge Animate CC: Came before Animate CC and the initial purpose of this software is to replace Flash as a platform for HTML5/CSS3/JS animation. There are certain features that Edge Animate support which Animate CC does not such as importing SVG files, exporting HTML DOM elements etc. However, with the evolving Animate CC, the day of merging these 2 products won’t be long.

Google Web Designer: A tool developed by Google. This tool is still in beta mode. This is my least preferred tool of the 3 to be honest. Since this tool aims at designers, drag and drop feature is very powerful. However, the downside is you don’t have the flexibility to alter the HTML/CSS/JS code when it comes to customisation. Hopefully this issue will be solved in later iterations of this software.

After Effects CC: You may wonder why After Effects? After Effects is very powerful in terms of animation for videos. However, there is a script library called bodymovin which is available for free on github that helps you to export into javascript! Voila! waaark.com which is recently featured on awwwards.com also used After Effects CC and bodymovin in some of its animation.

FramerJS: Developed by 2 guys named Koen Bok and Jorn van Dijk. This tool is basically a prototype tool for iOS/android and the web which help you speed up your prototype process. The good thing about this tool is that it is also very powerful in terms of animation. You can find lots of beautiful demos with smooth transition on their website at framerjs.com The learning curve is not very steep either. If you know javascript, you already know FramerJS!

Green Sock Animation Platform (GSAP): This is my most favorite framework. This animation framework came out back in the day of Flash but has evolved rapidly. Now it fully supports the modern web (HTML5/CSS3/JS). The syntax is very easy to read and write. Another reason I chose this framework is that it has a very supportive community. Whatever you need may have been asked by someone else on the internet. You can also find lots of tutorials online such as ihatetomatoes.net and frontend masters

Above are a few animation tools and frameworks which are most noticeable in the community at the moment. There are of course other animation libraries out there but the ones mentioned above are more than enough for you to get going with your first animation project. So grab a cup of coffee and start animating!

Texo Design is one of the renowned names in the web development company in melbourne. We are the team of well-qualified and experienced staff as we deal with mobile apps, web development and social media campaign. We offer you the best tailor-made solution. Your success is our guarantee as we commit quality, professionalism and communication to our clients. These three pillars will help you in making your formal decision. We transform your ideas into reality with highly innovative technologies and experts mindset. Contact us +61 3 9995 0765 or http://www.texodesign.com.au/ for more information

Be the first to post on the blog

Leave a Reply




*

Back to blog