When you browse through some of the award winning websites, you might be wondering how did they build it?
Are they using GreenSock, Velocity or Pixi.js? Are they using CSS or JavaScript animations, jQuery or vanilla JavaScript?
To answer these questions I have deconstructed 31 award winning websites from Awwwards.com.
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.
Learn CSS and JavaScript animations, be creative, be brave and you will be fine.
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
Related Video
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.
All modern browsers are now supporting CSS animations and transitions so now is the perfect time to get creative.
Related articles:
2. JavaScript Animations
29 out of 31 websites are predominantly using JavaScript animations.
They also use CSS animations, but most transitions and UI effects are done using JavaScript.
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.
The advantages of a quick and more flexible JavaScript workflow by far outweigh the disadvantages of extra file size.
Related articles:
3. jQuery
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.
Related articles:
4. JavaScript Animation Libraries
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 sites are using Pixi.js,
- 3 sites are using PreloadJS,
- 2 sites are using raphael.js,
Related articles:
5. Scrolling Animations
21 out of 31 sites are triggering or playing some animations as the user scrolls down the page.
4 sites are using ScrollMagic, others use Wow.js, scrollReveal.js, Waypoints or created their own trigger functions.
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.
ScrollMagic will be taking over from Skrollr when it comes to the implementation, mostly in combination with GreenSock.
Related articles:
- 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.
These are mostly quite experimental effects and require a good JavaScript knowledge.
Pixi.js is used 3 times and Three.js once.
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.
3 sites are using WordPress, 2 sites and build using Angular.js and 1 site is build using React.js.
Related resources:
- React For Beginners by Wes Bos
31 Websites Of The Day
| Name | Video | JS | Canvas | GSAP | jQuery |
|---|---|---|---|---|---|
| Awwwards.com websites of the day from December 2016 | |||||
| Peugeot – Follow your Intuition | X | X | X | X | X |
| PrimeIT | X | X | – | – | X |
| Christmas Express | X | X | – | X | – |
| Gitman Bros. | X | X | – | X | X |
| This Also | X | X | X | – | X |
| The Spare Time Calculator | – | X | – | X | – |
| Slay Your Next Giant | X | X | X | – | – |
| Resn Dim Sum | – | X | X | X | X |
| Deja vu | X | X | X | – | – |
| Spindrift Racing | – | 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 |
| Shape Christmas | X | X | – | – | X |
| Because Recollection | X | X | X | X | – |
| Tennent Brown Architects | X | X | – | – | X |
| TSabé Masson | – | X | – | X | X |
| Occupied | X | X | X | X | X |
| Trefecta | X | X | – | X | X |
| Kekselias | – | X | – | X | X |
| Molamil.com | X | X | X | X | X |
| Benjamin Guedj | – | X | – | X | X |
| The Museum of the World | – | X | X | – | – |
| 34 | – | – | – | – | X |
| Draw a better 2016 | – | X | – | – | X |
| Bonne Marque | X | X | – | X | X |
| Star Wars: Lightsaber Escape | X | X | – | X | X |
| Year in Music | – | X | X | X | X |
| Riiot Labs | X | X | – | X | X |
Conclusion
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.
If you are more into design trends then check out these 16 Web & Graphic Design Trends To Watch In 2016 by Ernesto Olivares.
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.
I received the blog post update in my mail and I’m so glad to have subscribed to your mailing list. GreenSock looks so much fun , cannot imagine I’ve heard about it first in your blog. Thanks a lot – Its a great informative read right around the time I’m beginning to learn latest front end technologies.
Great to hear that you’ve found it useful Annuradha! Thanks for stopping by.
Hi Petr,
Can you elaborate in greater detail on what you mean by “ScrollMagic will be taking over from Skrollr when it comes to the implementation, mostly in combination with GreenSock.” in section number 5. Thanks! Loved your Skrollr Workshop Combo.
Hi Will, with more and more people getting familiar with GSAP and Velocity.js, I think they will also want to take their knowledge and apply it creatively to their projects.
As you probably know javascript libraries such as GSAP offer a very flexible workflow and in combination with ScrollMagic can be used to create a wide range of effects from simple to very complex interactive animations.
That said Skrollr is still working fine and the HTML data-attribute approach is very friendly for designers and developers not so confident with their JavaScript skills.
Hope that helps and thanks heaps for signing up for the Skrollr Combo.
Definitely looking forward to learning more animation in 2016 as I feel I have a solid grasp on everything else front-end design wise. Already got your GreenSock animation tutorial but also looking into SVG animation, and image/video compression and optimization as well.
I feel like my sites are lacking in performance optimization the most.
Hi Joe, thanks for sharing your opinion and for signing up for the GreenSock Workshop!
Performance is a big part of what we do, I would recommend implementing one new thing in each of your new projects and over time you’ll learn heaps about the individual parts of a good performance optimisation.
Hi Petr,
thanks for this nice article!
I think GSAP and ScrollMagic animations combined with css for not as complex animations are really powerfull.
I like the canvas animation which we can see on some awwward winning websites really much!
I think in 2016 we’ll see more svg animations too.
Thanks for the article!
Cheers,
Norman
Hi Norman, you are right, GSAP + ScrollMagic + CSS Animations are the way to go. I have a few tutorials and templates coming out soon. Stay tuned.
Hi Petr,
Thanks for a great post! I’ve spent the last few years trying to create a GUI on top of Greensock. The goal is to reduce production time and be able to handle more complexity in an easy manner. If you find the time, take a look: www.anitool.com (still in beta ..)
Hi
Just got inspired by you, and started digging myself in Web animations. i want to create very sleek transitions on scroll and on load event , loading animations and page transitions for a corporate look. Any ideas what i should learn and how i should start.
Thanks Priya. Start with learning CSS3 Animations (try CSS3 Button Hover Effect or CSS3 Spinning Preloader) and then move onto JavaScript animations if you feel comfortable coding JS.
Hi bro, I’m From Taminadu, India, i know you through youtube channel you are doing great bro… And im studying b.e3rd year.. I need to learn web animation… Please help me bro … And im 0 in js after knowing you only i came know about gasp and other scripts … Help me to get grow bro
Good Collection of web animation trends.