Website Animations using Canvas Language

Add a little extra punch to your WordPress posts with Canvas Language website animations. The WordPress plugin will release soon.

You can create animated headers, infographics, backgrounds, games, and as much as your imagination can discover. Visit our animation studio user guides and tutorials to see the types of website animations you can create or you can just browse around our site and see animations scattered about.

Show More

If you already have our WordPress plugin, then great(!) you’re a beta tester. Otherwise, after the testing interval we’ll be publicly releasing the Canvas Language plugin for general usage.

  • Canvas Language abbreviates to SCL but we drop the ‘S’ in saying the words of it.
  • SCL is short for Structured Canvas Language. The name is a play on Structured Query Language because the declarative syntax of SQL inspired that of SCL.
  • It has been in development as a side project for about 10 years.
  • It is used for games @, gifs @, and now here, for WordPress.
  • This blog will serve as the general platform for announcements, tutorials, and learning-focused posts about using SCL on WordPress and other platforms.

How to make website animations with SCL

Canvas Language is a unique method of creating website animations. It is interpreted by JavaScript which means the language can be entered into a web page directly. That is how the WordPress animation plugin works. Our plugin provides the interface to write and test SCL animations. When you create a website animation with SCL, you’ll find it easy to edit and tweak, and the results are immediately seen on your web site.

Website animation SCL UI screen capture
Website animation SCL UI screen capture

The animations created with SCL are sprite animations. This means small images (or large) are moved around according to the instructions in the SCL source code. The plugin UI allows you to upload your individual sprite images, then refer to them in your animation code. With this done, you can move sprites, rotate them, collide them, attach event handlers to them, and much much more.

Show less

Interactive Infographics

The SCL WordPress Plugin lets you create interactive infographics without any other tools besides your images. Start your own infographic using any of our SCL scripts and altering it to meet your needs. This one is a great place to start.

Animated WordPress Title

Animated titles are easy to create with SCL. The above example is the default animation when opening the SCL Editor. It provides three variables at the top that you can change. Two are quite self-explanatory.

var COLORS="unique-bk.jpg"
var POSTTITLE="Title Your Post"
var SPEED=90
  1. POSTTITLE is the text of your title
  2. SPEED is how fast to rotate the background of the title. The speed is calculated as degrees per second. The default is 90 degrees of rotation per second.
  3. COLORS is the name of the image file to use as the background of the text. The post comes with three defaults: The fancy design you see here, and color variations.

Default background included are:

animated title background: purple radial pattern
Radial Background Pattern in Purple
Animated title background: Blotchy rainbow colors
Blotchy rainbow color background tile
Animated title background: Radial Rainbow
Radial Rainbow Background Tile

COLORS is a file name based on the uploaded image on the images tab. Meaning you can upload your own background image, then use its file name for the color variable. For example, you code might look like this:

var COLORS="flowers.png"
var POSTTITLE="Flower Markets of Denver"
var SPEED=180

If you are looking for images to use for your animated title background, try visiting Open Game Art or any of the other free image services you can find through Google.

You can make much more than just animated titles with our plugin. Be sure to check out our guide for interactive animated examples. There you will be able to test out code, try features of SCL, and how you might want to use them to add animations to your posts. Our reference guide will teach you how to add different kinds of movements to your animations, and how to make them interactive.