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 @ http://playscl.com, gifs @ https://editablegifs.com, 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

Leave a Reply

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