When you export a Flow project to HTML, React, or anything Web-related, Flow includes a set of helper classes and extensions that help manage and control your animations. This page provides an overview and a link to each of these files.
A major goal behind our efforts here at Flow is to produce the cleanest code possible. For any platform, this means conforming to industry standards. For Web, in particular, it means staying away from 3rd party libraries and adopting the future of natively supported cross-browser animations - a.k.a the Web Animations API (WAAPI).
Flow's React exports also use these files.
There are a lot of reasons for adopting WAAPI. Primarily, it is on-track to being the only cross-browser API and even though portions of the API aren't fully supported by every browser, there is a polyfill that covers 99.9% of the gaps. Also, WAAPI is indcredibly performant.
Working with WAAPI can be difficult, so to make things as clean as possible, Flow requires a few lightweight classes for organizing and automating the construction of native web-animations.
Within FlowCommon - Web are the following classes:
- Player – a class for controlling playback of a Timeline.
As Flow matures and new exports are added, this list will continue to grow.
There are a few easy ways to include these files in your site.
Use our cdn to link a minified version of FlowCommon-Web.
Include the following link in your <head>:
https://createwithflow-flowcommonweb.s3-us-west-2.amazonaws.com/1.8.3/flowCommonWeb.min.js
Simply add include our single file into your site, and link it in the <head> of any page that contains a Flow animation.
Here's a link to the minified version: flowCommonWeb.min.js
If you prefer raw files, so you can see / modify as you go, you can add them to your project and then include them all.
We use the following technique to add files manually:
Add a flowCommon.js file to your project:
function createCommonScripts(commonFolderPath) {
let sources = [
`${commonFolderPath}/Player.js`,
//optionally add a local version of web-animations
`${commonFolderPath}/web-animations.min.js`,
//optionally add any other files you might want to include
`${commonFolderPath}/YourCustomizedDriver.js`
];
loadScripts(sources);
}
createCommonScripts(commonFolderPath);Then, on any page where you want to run a Flow animation, add the following script
<script>
function loadScripts(sources) {
sources.forEach(src => {
let script = document.createElement("script");
script.src = src;
script.async = false;
document.head.appendChild(script);
});
}
let commonFolderPath = "./FlowCommon"
let flowCommonScript = [`${commonFolderPath}/flowCommon.js`];
loadScripts(flowCommonScript)
</script>You will have to modify the commonFolderPath to suit your needs.
There are 3 core classes to the FlowCommon-Web package.
An Player is an object used to manage the playback of a Timeline created from Flow. You can reuse the player instance by changing its timeline.
Check out our documentation here: Player Class (Web)
