ProStyle makes it easy to turn your stories into animated web content. You write your stories using a simple text-based language, point ProStyle at it, and your story will come to life. The animations can be added to any HTML document, including web pages and web applications. All you need is a text editor and a little creativity.

Getting Started

Step #1

  • Download the latest version as a .zip file from the Releases page.
  • Open examples.html in a modern web browser and look around.

If you like ProStyle, please STAR us on GitHub!

Step #2

  • Hook up your HTML page
index.html
<!DOCTYPE html>
<html>
	<head>
		<title>My Animated Story</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/prostyle/1.2.0/prostyle.min.js"></script>
	</head>
	<body>
		<div data-prostyle="myStory"></div>
	</body>
	<script src="myStory.js"></script>
</html>

Step #3

  • Write your story JSON and assign it to ProStyle.Stories
  • Of course, the story could be inline in your HTML file if you’d prefer
myStory.js
/* global ProStyle */
ProStyle.Stories.myStory = {
	item: {
		text: "My Story",
		action: {
			animation: { duration:3, repeat:5 },
			rotation: 360
		}
	}
};

Step #4



If you like ProStyle, please STAR us on GitHub