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

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});
tlShortCuts
	.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) {
	event.preventDefault();
	tlShortCuts.timeScale(1).play();
});

// Animation out
$('#closeShortcutsBtn').on( "click", function(event) {
	event.preventDefault();
	tlShortCuts.timeScale(2).reverse();
});

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 →

Conclusion

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.