Getting Started

Getting Started with Motion Storyline

Embed an animation 

If you are new to Motion Storyline, first familiarize yourself with the video embed technique available for animation exports. This should be familiar if you have ever embedded YouTube or Vimeo videos, and uses iframes in exactly the same way. The main difference is that those platforms host the videos, while Motion Storyline requires you to host the files by deploying your project to Netlify from within the app, or you can do this manually if you are familiar with Netlify.

Import a premade template

When you first log in to Motion Storyline, the best way to get started with how projects are set up is to go to the Import button on the upper right. This will give you some pre-made templates to import for each of the main themes, and a main color option to choose. You can update the colors to reflect your branding by entering the project after it is created and going into the branding settings from the top menu. 

Main app interfaces

Before entering a project, on your left side you will see the main app interfaces which allow you to either add on functionality to your projects or build assets for your projects. However, until you have a project set up you will not need to explore any of these features and some features will not work yet. The only interfaces that will work before you have a project set up are the 3D tab and the Record tab.
  • Record tab - this will allow you to record your screen using the WebRTC API for your browser. Google chrome is recommended for this functionality, and other browsers may or may not work correctly. Recording project animations (burning animations down to compressed video for export to social media platforms) does not work yet until you have a project that you have exported as an animation.
  • 3D tab - you have access to a modified version of the Three.js editor from within the app. You can import and save projects in 3D. This tab has it's own documentation for how it integrates with Motion Storyline.
  • Additional functionality including deploying to Netlify, advanced layout and color scheme will apply specifically to a project you create, but your settings cannot be saved if you do not yet have any projects.

Projects and tasks

Tasks belong to larger projects - project settings can be thought of as 'parent' settings of children tasks. Global settings in projects apply to tasks. For example, in the landing page theme each task represents a landing page, and any styling or call-to-action text in the project settings would appear on all the pages. The 'parent' project page for all the landing pages might be conceptualized as the home page for a website with many landing pages. Each landing page might represent a product feature and the landing page might have a feature section which summarizes each feature. However Motion Storyline's landing page theme cannot export the home page - the reasoning for this is usually the home page requires a very specifically crafted style and is the place to showcase front and center all of the uniqueness of a brand. A generated page would be too formatted to be good design. There are still a number of options to do this with Motion Storyline - the easiest is to just use a modified theme from Webflow and customize it. 
A more relevant and powerful way of working together the multiple parts created would be to embed the animation version of tasks which each represent a feature for the landing page theme. The embed can be linked from each feature on the home page and the home page could link to both the landing page as well as the video. The Motion Storyline home page does exactly this and uses the landing page theme and each task represents a product feature. 

Create structure in written content

The building blocks of Motion Storyline is the written content. Projects should use succinct, headline style overarching descriptions of topics followed by short descriptions. If multiple outlines all fall under the main concept umbrella, each one should be created as a task under the project - in many cases no descriptions in the project level will even be necessary. 
Each task will also need a brief summary description of the topic, and then more expanded descriptions in long format. Pay close attention to headings - it is a good practice to create a headline for each description box with a quick summary. Headlines should be consistent if used, and may need to stand on their own as they are extracted in summary formats with the following description omitted. 

Add additional resources for animation format

Click the AWS icon for any box to expand the create audio button. This uses Amazon Web Services AI voices to turn your text into an audio track. This is a great placeholder for video if you intend to hire a professional voice over artist for the final version. Using this feature will give you a great sense of timing, verbiage and content in video format, and allow for changes in real time without incurring expensive audio recording costs to make updates. 
It is also recommended to use screenshots initially as placeholders for product walkthroughs. Try to separate out your walkthrough into structured concepts or topics - instead of trying to prepare for a live presentation that shows end to end functionality (which can be overwhelming and stressful), first just write out each small section of what you need to cover and use a screenshot to represent it with a generated voice over. Everything will start to fall into place and you will know exactly what you need to record in your live screen recording. Each screen recording should be recorded separately and replace each static screen shot. This prep work makes recording unnecessary takes much less likely.

Use existing page content

If you already have landing page content, just copy/paste in into Motion Storyline. This content will generate landing pages if you use the landing page theme in static site HTML. This is very SEO friendly, performant code that gives you the best possible technical foundation for keyword researched content writing. You may also use generated PDF and / or animation formats with the pages you already have, and both formats can be embedded into HTML. 

Advanced customization

Choosing the color tab from the dashboard allows for additional branding to be placed into generated formats. Not all themes can support all the options, but you can change themes in the future to re-use the same content. Create a new gradient - it will automatically generate the gradient from the main brand color you have for your project. Save it out to the correct project and it will now show up when you generate or export your project. 
Choosing the layout tab will give you a wireframe representation of the layout variations you can choose. Save out any changes to the project you want to apply the layout to.
For advanced design details, go into the project or task and click on visual mode from the bottom menu. Storybook will launch and give you a menu of each design component and a preview of the Figma file that represents the component. Open the file in Figma and copy it to your personal account. Make any edits you need to and you can re-import the component using the Figma documentation for how to set up integrations of the Figma API.