31 Top Websites Deconstructed: What Are The Hot Trends

Web Animation Trends: 31 Top Websites Deconstructed

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

2016 Front-End Development Trends

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:

Related Video

1. CSS Animations

Web Animation Trend - 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

Web Animation Trend - 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

jQuery is still very popular in 2016

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

Web Animation Trend - GreenSock Animations

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:

Related articles:

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

5. Scrolling Animations

Web Animation Trend - 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:

6. Video and Audio

Web Animation Trend - HTML5 Video

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

Web Animation Trend - 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

Web Animation Trends 2016

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:

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.

100% Privacy. Guaranteed! Powered by ConvertKit

12 thoughts on “Web Animation Trends: 31 Top Websites Deconstructed

  1. Annuradha

    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.

    Reply
  2. Will Liu

    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.

    Reply
    1. Petr Tichy Post author

      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.

      Reply
  3. Joe Toscano

    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.

    Reply
    1. Petr Tichy Post author

      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.

      Reply
  4. Norman Dubois

    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

    Reply
  5. Tom Ottmar

    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 ..)

    Reply
  6. priya

    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.

    Reply
  7. Manobala.S

    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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>