When you browse through some of the award winning websites, you might be wondering how did they build it?
Here is what I’ve learned.
The Takeaway From Top Websites
If you want your message, product or services to spread in 2016, you will need to create a website that tells your story in a more visual, engaging and interactive way.
A quick overview:
- 100% use CSS animations in some way
- 94% use JS animations more than CSS animations
- 77% use jQuery
- 68% use GreenSock as their animation platform
- 67% trigger animations as you scroll down
- 61% use video for background and effects
- 39% use audio for background and effects
- 32% use HTMl5 Canvas for creative effects
1. CSS Animations
31 out of 31 websites are using CSS animation and/or transitions for creative effects and UI animation.
Mostly simple UI effects with one or two keyframes.
Hover effects or elements sliding into a view based on user interaction are the most common use cases.
Only 2 out of 31 sites are staying away from JS animations and majority of their effects are done in the stylesheet.
These numbers clearly show that the more advanced interactions and creative effects are just not suitable for pure CSS animations.
24 out of 31 websites are using jQuery. Is this surprising you?
As you can see, jQuery is still a very popular library and can make your workflow and code more streamlined.
It can save you tone of development time and make your code easier to read, so you can concentrate on the creative side of coding.
21 out of 31 sites are using GreenSock for most of their animations and UI transitions.
This number is not a coincident and clearly shows the growing popularity of GreenSock amongst the creative developers and designers.
If you want to master GreenSock animations, join me in the GreenSock Workshop.
Here is a quick overview of some other libraries used:
5. Scrolling Animations
21 out of 31 sites are triggering or playing some animations as the user scrolls down the page.
A good animation is invisible to the user and so is a subtle scrolling animation triggered at the right time.
In general you might be thinking that the scrolling animations are on decline, but I think we will still see a lot of them (correctly implemented) in 2016.
- The Guide to Scrolling Animation Libraries
- Simple ScrollMagic Tutorial
- How To Animate SVG With GreenSock
- ScrollMagic Tutorial – Fullscreen Slideshow
- SVG Scrolling Animation Triggered By ScrollMagic
6. Video and Audio
19 out of 31 sites are using video and 12 out of 31 sites are using audio effects.
With the increasing browser capabilities and internet speed across the globe, it’s not surprising to see that many sites using video and audio effects.
They both require a very specific skill-set, but are adding extra dimension to the projects.
7. HTML5 Canvas
10 out of 31 sites are using HTML5 Canvas for their animations.
8. WordPress, React.js and Angular.js
Here are some numbers related to the frameworks and CMS used, that I could digest from these 31 deconstructions.
- React For Beginners by Wes Bos
31 Websites Of The Day
|Awwwards.com websites of the day from December 2016|
|Peugeot – Follow your Intuition||X||X||X||X||X|
|The Spare Time Calculator||–||X||–||X||–|
|Slay Your Next Giant||X||X||X||–||–|
|Resn Dim Sum||–||X||X||X||X|
|Our Brand Is Crisis||X||X||–||X||X|
|Google – Moteur de Réussites Françaises||X||X||–||X||X|
|Ford Focus Fastback Drive||X||X||–||X||–|
|World’s Easiest Decision||–||X||–||X||X|
|Lawrence Boone Selections||–||X||–||–||X|
|Tennent Brown Architects||X||X||–||–||X|
|The Museum of the World||–||X||X||–||–|
|Draw a better 2016||–||X||–||–||X|
|Star Wars: Lightsaber Escape||X||X||–||X||X|
|Year in Music||–||X||X||X||X|
I hope that you’ll find this breakdown useful when deciding which animation skill to learn in 2016.
Do you want to learn GreenSock from scratch? Join me in the GreenSock Workshop.
What is your biggest takeaway from these top websites?
Which area of front-end development will you be focusing on the most in 2016?
Let me know in the comments.
Download Free Toolkit
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.