Skip to content

Instantly share code, notes, and snippets.

@willblaschko
Last active March 23, 2019 22:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save willblaschko/579998deb99366be7c7876b80ecac7e2 to your computer and use it in GitHub Desktop.
Save willblaschko/579998deb99366be7c7876b80ecac7e2 to your computer and use it in GitHub Desktop.
A Node.js support function (and example Sequences) that quickly creates all the commands required to animate a multi-item Sequence, including customization to control speed, jump, and whether the animation reverses.
module.exports = {
animate: function (componentId, count = 7, delay = 20, jump = 1, reverse = true) {
let commands = [];
for (let i = 0; i < count; i += jump) {
commands.push({
"type": "ScrollToIndex",
"componentId": componentId,
"index": i,
"align": "first",
"delay": delay
});
}
if (reverse) {
commands.push({
"type": "Idle",
"delay": delay
});
for (let i = 0; i < count; i += jump) {
commands.push({
"type": "ScrollToIndex",
"componentId": componentId,
"index": count - (i + 1),
"align": "first",
"delay": delay
});
}
}
return commands;
}
};
{
"type": "Sequence",
"width": "100vw",
"height": "100vh",
"scrollDirection": "horizontal",
"id": "enemySequence",
"data": [
{},
{},
{},
{},
{},
{},
{},
{},
{
"source": "<FILE>.png",
"width": "100vw"
}
],
"items": [{
"type": "Container",
"minWidth": "${(data.width != null} ? data.width : '100vw'}",
"height": "100vh",
"items": [{
"type": "Frame",
"width": "4px",
"height": "30vh",
"backgroundColor": "#ffffff00",
"when": "${data.source == null}"
},
{
"type": "Image",
"align": "bottom",
"scale": "best-fit",
"height": "100vh",
"width": "100vw",
"source": "${data.source}",
"when": "${data.source != null}"
}
]
}]
}
{
"type": "Sequence",
"id": "m",
"data": "${payload.data.map}",
"width": "100vw",
"height": "100vh",
"scrollDirection": "horizontal",
"item": {
"type": "Container",
"width": "${payload.data.colWidth}vw",
"height": "100vh",
"bind": [{
"name": "parentIndex",
"value": "${index}"
},
{
"name": "height",
"value": "${data}%"
},
{
"name": "paddingTop",
"value": "${100-data}%"
}
],
"items": [{
"type": "Frame",
"backgroundColor": "#00ff00",
"position": "absolute",
"top": "${paddingTop}",
"height": "${height}",
"width": "${payload.data.colWidth}vw"
}]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment