Canvas animation timeframe keyframe

9 Mind-Blowing Canvas Demos

The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that will make your jaw drop!

Hospy.co

1.  Zen Photon Garden

The Zen Photon Garden demo is the epitome of mind-blowing.  This epic canvas demo allows for drawing on the canvas with reactive light streams, allowing the user to see the end product of their new line will be.  Even better, this demo allows you to save and load output.

Canvas Demo

2.  Tear-able Cloth

The Tear-able Cloth demo has set the web alight over the past few months and for good reason.  This demo is the smoothest you’ll see and considering the task it accomplishes and the how little code is involved, it will take your breath away.  There’s more to it than simple pulling and physics — the animation and needing to account for pulling hard enough to elegantly animate a tear makes this demo even more amazing.  A perfect illustration of canvas’ capabilities.

2014-10-10 12_54_43-9 Mind-Blowing Canvas Demos

3.  Particles

It’s hard describe this demo outside of “ftw”.  This demo animates color, position, connection lines, and opacity, all the while animating smooth as a baby’s….it’s really smooth.  Marvel at this beast.

2014-10-10 12_55_45-9 Mind-Blowing Canvas Demos

4.  Motion Graphic Typeface

I wish I could describe how this effect is done but I can’t.  I see that each letter is comprised of different image data, but that’s about it.  What I can say is this animation is absolutely mind-blowing, as letters animate into place and the aspect at which you see the text depends on your mouse position.  Shocking.

2014-10-10 12_56_37-9 Mind-Blowing Canvas Demosasd

5.  Motion Graphic Typeface II

As if the first wasn’t impressive enough, the second MGT demo is one worthy of a Pulitzer Prize. I’d give up my second, third, and eighth-born to be this clever.  Not only does the text animate but there’s an incredible colored blur that’s part of the animation.  This demo is truly a sight to behold.

2014-10-10 12_54_43-9 Mind-Blowing Canvas Demos

6.  Gestures + Reveal.JS

Now only did this demo blow my mind, but it also blew my CPU.  This exercise uses your device’s camera and microphone to move a cube of data based on gestures.  If you have a MacBook Pro, you shouldn’t die before trying this out.  Start the demo and flail your arms about — you’ll se the demo content move about and then start believing in spirits.

7.  Free Rider 2

You can’t cover the awesomeness of canvas without including at least one game.  Canvas is arguably the future of HTML5 gaming, as Firefox OS will soon demonstrate.  This brilliant but simple bike game shows that canvas is ready for prime time!

Canvas Demo

8.  30,000 Particles

The 30k Particles demo incorporates some really awesome stuff:  circular shapes (radius), animated exploding and returning particles, and mouse listeners to allow the user to control the explosions.  An excellent example of interactivity and logic.

9.  HTML5 Video Destruction

I must pay homage to one of the first truly eye-catching canvas demos I saw — an explodable canvas video.  You click the video and pieces explode, yet the video keeps playing its segment/position during the explosion while it returns to its original position.  An inspiring demo to to all of us.

Canvas Demo

Youtube Vimeo on click play pause api javascript

Play and Pause Buttons for YouTube and Vimeo Videos (via Their APIs)

Sometimes you just need to start a video playing by some user interaction on the page other than clicking right on that video itself. Perhaps a “Play Video” button of your own creation lives on your page and you want to start that video when that button is clicked. That’s JavaScript territory. And if that video is a YouTube or Vimeo video, we’ll need to make use of the APIs they provide. No problem.

For these examples, we’ll assume you’ve already picked out a video and you’re going to put it on the page in an

Tutorial source: CSS-Tricks

For YouTube

1. Make sure the iframe src URL has ?enablejsapi=1 at the end

Like this:

<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>

I also put an id attribute on the iframe so it will be easy and fast to target with JavaScript.

2. Load the YouTube Player API

You could just link to it in a <script>, but all their documentation shows loading it async style, which is always good for third-party scripts, so let’s do that:

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

3. Create a global function called onYouTubePlayerAPIReady

This is the callback function that the YouTube API will call when it’s ready. It needs to be named this.

function onYouTubePlayerAPIReady() {

}

It’s likely you have some structure to your JavaScript on your page, so generally I’d recommend just having this function call another function that is inside your organizational system and get going on the right track right away. But for this tutorial, let’s just keep it soup-y.

4. Create the Player object

This is the object that has the ability to control that video. We’ll create it using the id attribute on that iframe in our HTML.

var player;

function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player('video', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

Another callback!

5. Create the “player ready” callback and bind events

We named this function when we created the player object. It will automatically be passed the event object, in which event.target is the player, but since we already have a global for it let’s just use that.

Here we bind a simple click event to an element on the page with the id #play-button (whatever custom button you want) and call the player object’s playVideo method.

function onPlayerReady(event) {
  
  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.playVideo();
  });
  
  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  });
  
}

All Together Now

And that’ll do it! Here’s a demo:

I used a little SVG templating in there for the buttons just for fun.

For Vimeo

1. Make sure the iframe src URL has ?api=1 at the end

<iframe src="//player.vimeo.com/video/80312270?api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>

I also put an id attribute on the iframe so it will be easy and fast to target with JavaScript.

2. Load the “froogaloop” JS library

The Vimeo player API actually works by sending commands through postMessage right to the iframe. You don’t need the froogaloop library to do that, but postMessage has some inherent complexities that this library (by Vimeo themselves) makes way easier. Plus it’s only 1.8kb so I’d recommend it.

<script src="froogaloop.min.js"></script>

3. Create the player object

var iframe = document.getElementById('video');

// $f == Froogaloop
var player = $f(iframe);

We target the iframe by the id attribute we added. Then we create the player using the special froogaloop $f.

4. Bind events

All we have to do now is call methods on that player object to play and pause the video, so let’s call them when our play and pause buttons are clicked.

var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
  player.api("play");
});

var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
  player.api("pause");
});

All Together Now

That’ll do it for Vimeo. Here’s a demo:


You can do much more with the APIs for both of these services. It can be pretty fun, just dive in!