World Cup Schedule - Traffic

Pocket World Cup Schedule Deconstruction

Two weeks to go to the FIFA World Cup 2014 in Brazil and what was originally created as a little side project is suddenly getting 2500 visits per day on average.

35000 views in one day is also by far the most visited project I have ever worked on!

Visit Site

Why is it so popular and why did I created it anyway? Which plugins did I use and what were the lessons learned?

The Idea

Brazil 2014 - World Cup Schedule

The idea was pretty simple. A few weeks ago I was looking for a simple world cup schedule and all I have found was plenty of PDFs for print or ugly tables with all the games.

I wanted something very simple that I could just have in my pocket and know exactly who is playing today (what time I need to wake up) and what were the results from yesterday’s games.

I couldn’t find anything useful so I’ve made Pocket World Cup Schedule.

Why Greensock Draggable?


From the start I had a pretty clear idea about how I want it to look and that I want to try to implement Greensock Draggable and ThrowProps Plugins.

I wanted to play with this plugin for sometime and now was the right time to learn how it works and how to implement it into a real project.

I didn’t know if the idea I had would be possible to implement, but as you can see I have figured things out.

Tip: Having troubles to work on an exciting project at work? Pick something that you are really passionate about and create something new in your free time. You’ll love it!

A Code Example


You know that Greensock is one of the most powerful plugins when it comes to JavaScript animations. Here as a code example I have used for the top shortcut navigation animation:

// Toggle shortcuts Timeline
TweenMax.set($('#shortCuts, #shortCuts li'), {css:{y:'-=100',opacity: 1}});
var tlShortCuts = new TimelineMax({paused:true});
	.to($('#shortCuts'), 0.7, {css:{y:'0'}, ease:Power4.easeOut}, 0)
	.staggerTo($('#shortCuts li').get().reverse(), 0.4, {css:{y:'0'}, ease:Power4.easeOut}, 0.1, 0)
	.to($('#logo, #menu'), 0.4, {opacity: 0}, 0);

// Animation in
$('#menu').on( "click", function(event) {

// Animation out
$('#closeShortcutsBtn').on( "click", function(event) {

Line 2 hides the list and all the items out of the view. staggerTo on the line 6 gets all the list items in a reversed order and animates them in. Clicking on the menu icon or close button then plays the timeline forward (line 12) or in a quicker reversed direction(line 18).

You can see more useful code snippets in the work in progress post.

The Enhancements

After the first release to the public and receiving a lot of feedback and comments especially from reddit, I have added a new features which weren’t originally in the plan, but hey if people ask for it, give it to them.

The additional features were:

  • keyboard navigation
  • right/left arrow moves to next/previous day
  • keyboard shortcuts – press A,B,C etc to see group tables (using Keyboard.js)
  • countdown to the first game kickoff (using CountUp.js)
  • click on a flag to see all games by country
  • click on the group letter to see the group table
  • added simple help menu explaining how to use all the features
  • added a menu allowing users to jump to a different stages of the tournament
  • automatically load the schedule on the current day (will work only during the world cup)

The Lessons Learned

Here are a few lessons that I’ve learned on this project:

  • don’t make it perfect, just ship it live as soon as you can
  • getting a real users feedback is invaluable
  • if something is really useful people will share it like crazy
  • people like simple things
  • use Moment.js for super easy date, time and timezone manipulation

Visit Site


You might not be the biggest soccer fan, but I hope you have still learned something new in this post.

Don’t forget to share the world cup schedule with your soccer mad friends, they will love you for that! And if you have any questions about this project or plugins used, you know you can just leave a comment below.

17 thoughts on “Pocket World Cup Schedule Deconstruction

  1. Victor Janin

    woaw! Congrats on the visits!
    I myself was looking at an excel sheet that a friend gave me, this is muuuch nicer 😉

  2. Niloy

    i think is such a usefull website for fifa-2014 ,
    so Thanks o you for makeing this site.
    i just share it on my FB wall and groups.
    and also discuss about it with some my friends ,and they are very happy to get the site link from me 🙂

  3. Vitor jorge

    Amazing work Petr! It’s very useful, thanks.
    I love this feature: “click on a flag to see all games by country”


  4. Kirill Kiryshin

    Such a good tool!

    Simple, yet awesome idea with a very clean and intuitive interface. Shared with all my soccer-crazy friends 🙂

  5. Eugene

    Hey Petr, I guess we have something in common, I also hate tomatoes :)))
    I’m writing you from Canada from the other side of the globe. I have a question regarding a script for a website, that I have created for my mother, I’m an amateur in website development, this is my first website, that I have creating using a template, but still changing the whole content of it and learning the basics of how it’s constructed. I’m willing to know how to construct an interactive timetable for school purposes, using javascript or just html with some css coding. Can you suggest something ?


  6. wendy

    this is cool!
    Thanks for the deconstruction! do you use database for it?
    Just wondering if there’s any backend database tool for designers…



Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.