Getting Started

Ever wanted to create rich animations and add them to your web page or web application? Seen amazing presentations built on the web but figured you’d need to hire a developer to make something like that? Pro Motion makes it easy! You write your stories using a simple text language that describes how to position and animate content. They are written as JSON and processed by our Pro Motion JavaScript library.

All you need is a text editor and a modern browser.  You can use any old text editor to do the job.  There are some nice free ones like Atom, Bluefish, or Notepad++. You can use any modern web browser, like Chrome, Firefox, Opera, or Safari. It even works with the latest version of Internet Explorer, except the 3D effects will look flat.

 

Example

In the example above, the story on the left makes the animation on the right.  This story configures two model objects.  First, the canvas is configured to have a blue background color using the background property, and rounded corners are turned on.

Next, there is a text item with a font size set to 35% of the canvas height. In fact, Pro Motion’s properties use percentages almost everywhere. Why?  So the animation will scale to fit whatever device or screen area you show it on.

The text item is initially positioned with an x value of -25%. Items can be positioned in 3D space, using values for x, y and z.  Since only one number is given, it is applied to x. These values are also percentages of the container.  The origin (0,0,0) is centered on the screen.  So, setting the position to -25 places the center of the text half way between the left edge and the center of the canvas, horizontally.  The text will continue to be at y and z positions of 0, which is the center of the canvas.

Animation

Properties can be changed over time (also known as tweening) using one or more scripts.  In the above example, there is only one script. It performs two actions, one after the other.  The first action instructs Pro Motion to animate the position property to 25%, over 2 seconds.  The second has it animate back to -25%.

The player is configured to play the story in an endless loop.

That’s it!  Pretty simple, right?  Of course, there are lots of other property types, and each can be animated.  Multiple scripts can run at the same time.  For instance, you can animate the x position and y position at different speeds and duration.  The sky’s the limit.

There are also more item types than just text.  And we plan to continue to grow the set of them. An open sourced project on github enables developers to create even more.

To start crafting your own amazing stories, just follow 2 simple steps.

  1. Download Pro Motion
  2. Read the Documentation

 

Have fun!