Verdict MMA is an app concept - much like the popular Fantasy Football - where users interact with live Mixed Martial Arts events both by scoring rounds in real-time and making essential fight predictions before the events. The results of scoring and predictions are compared to friends and players around the world.
Promote the Verdict MMA application by grabbing the attention of potential users at the very first second. Get MMA fans excited with engaging and relatable content and show them the main use case and the context of which the app is used.
This is vector animation with javascript. All graphics are inline SVG and all animation is javascript enabled by the Greensock Animation Platform – GSAP.
An animation sequence like this is a technologically robust and experientially superior way to quickly show what an innovative product or service is about. It's made to be equally informative as entertaing.
On the technological end you have both graphics and animation that is purely made of code in languages that the browsers have spoken natively more or less since its birth – XML and JavaScript. Even ancient browsers understand it, making this new animation technique surprisingly backwards compatible, robust across platforms and easy to work with.
Since it's code-based it weighs virtually nothing and it loads instantly, which is the first pillar of an excellent user experience. Unlike video media it behaves consistently on both desktop and mobile devices.
To us, web-animation is a tool for great user experience. There is much more to say about both technological and experiential benefits of this animation technique. We are very keen to get in touch with fellow animators (since we still seem to be few around the world) and of course potential clients, so please reach out (email) if you feel like it.
- Total lenght: 33 seconds
- File size of graphics and animation: 71 KB (compressed and gzipped)
- Total file size including dependencies: 117 KB (compressed and gzipped)
- Loading time: Less than 0.5 seconds
- Time spent developing it: ~100 hours
- Other benefits: Exportable to GIF and video to be shared across social media. Animation is reusable and updateable. Any element and aspect can be made interactive.
- index.html 62673 KB - markup including all inline graphics
- app.css 1321 KB - layout including Normalizr
- app.js 7992 KB - all custom javascript including all animation
- Tweenmax.js 36879 KB - dependency, javascript library for animation
- DrawSVGplugin.js 1727 KB - dependency, extra features for TweenMax
- Modernizr.js 6134 KB - dependency, feature detection, enables serving different code to different browsers
- Total 116 726 KB
Read about gzipping your files
Graphics, animation and code by Johan Strömqvist at the Nerdmanship
- Stay updated with web animation on Facebook
- Talk to me on Twitter
- Follow me on Dribbble
- Fiddle with experiments Codepen
Follow these steps to implement the animation into an existing web page.
All code and assets is found in the /dist folder
- Copy/paste the header and download section from index.html into your html document (see comments in the html)
- It's also important to add the class ".no-js" to the html tag. It triggers a fallback if the user client doesn't allow javascript. Modernizr removes the tag if the user client does allow javascript.
-
All custom code necessary to drive the header animation is bundled in the object verdictModule in app.js. The button animation is one line of code located after the verdictModule in app.js.
-
Either put the /js folder in the root folder abnd link to app.js in the end of <body> after dependencies (see below), or insert complete verdictModule and button animation into any existing javascript document.
-
Run the animation by calling verdicModule.detect() and verdictModule.init() in that order. These calls are already in the app.js document.
-
Put the /css folder in the root folder and link to stylesheet app.css in the head or insert the contents into any existing document. Mind the path references (see below).
-
Lastly add the class .v-pale-blue to the body tag to match the page with the blue tint background of the animation
There are three images necessary for the project:
- appStore.svg
- googlePlay.png
- fallback.png
Either place complete /image folder in root folder or place image assets in any existing assets folder and update the path references.
Search for the following strings in the correlating document:
- app.css: "background: url(../images/appstore.svg) no-repeat;"
- app.css: "background: url(../images/googleplay.png) no-repeat;"
- app.js: "fallback.src = 'images/fallback.png';"
- index.html: "<noscript><img src="images/fallback.png" class="fallback"></noscript>"
- Modernizr - Must be parsed before html, goes in <head>
- GSAP TweenMax - Goes in end of <body>
- GSAP DrawSVGplugin - Goes in end of <body> after GSAP TweenMax
- A big thank you to Mandeep and Sanjay at Verdict who reached out about this project. Creds for their pioneering attitude towards innovative web tech.
- So much gratitude to Jack, Carl and the community at Greensock. Not only do they provide the new standard for HTML5 animation, but they have tireless attitude towards helping me with any challenge that I may face during production.
- Many thanks to Sebastian Otarola and Andreas Fabbe Andersson at DDB Nordic who provided support and feedback during development
- Extra highfives to the products and services that make my workflow so easy: Codekit, Codepen, Github, SVGO, html2jade and every silly know-it-all at Stackoverflow
The code is available under the MIT license.