diff --git a/examples/lottie/data.json b/examples/lottie/data.json new file mode 100644 index 0000000..8baba2d --- /dev/null +++ b/examples/lottie/data.json @@ -0,0 +1,117 @@ +{ + "v": "5.1.16", + "fr": 60, + "ip": 0, + "op": 69, + "w": 50, + "h": 210, + "nm": "bouncyBall_v1", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.667, "y": 0.199 }, + "o": { "x": 0.349, "y": 0 }, + "n": "0p667_0p199_0p349_0", + "t": 0, + "s": [27, 82.375, 0], + "e": [27, 242, 0], + "to": [0, 26.6041660308838, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.667, "y": 1 }, + "o": { "x": 0.333, "y": 0.911 }, + "n": "0p667_1_0p333_0p911", + "t": 35.092, + "s": [27, 242, 0], + "e": [27, 82.375, 0], + "to": [0, 0, 0], + "ti": [0, 26.6041660308838, 0] + }, + { "t": 75 } + ], + "ix": 2 + }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [50, 50], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 0, "ix": 5 }, + "lc": 1, + "lj": 1, + "ml": 4, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0, 0.890196078431, 0.780392156863, 1], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "nm": "Fill 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-1.854, -57.354], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 69, + "st": 0, + "bm": 0 + } + ], + "markers": [] +} diff --git a/examples/lottie/index.html b/examples/lottie/index.html new file mode 100644 index 0000000..0b8274c --- /dev/null +++ b/examples/lottie/index.html @@ -0,0 +1,13 @@ + + + + + Bouncy Ball - Comparing Web Animation Techniques - Lottie / Bodymovin + + + + + + + + diff --git a/examples/lottie/readme.md b/examples/lottie/readme.md new file mode 100644 index 0000000..d2444ab --- /dev/null +++ b/examples/lottie/readme.md @@ -0,0 +1,16 @@ +# Lottie / Bodymovin + +Lottie is suite of libraries that allows you to render After Effects animations across various web and mobile platforms. These animations can be designed in [Adobe After Effects](https://www.adobe.com/products/aftereffects.html), exported as JSON files (using an After Effects extension called [Bodymovin](https://www.adobeexchange.com/creativecloud.details.12557.html)), and rendered with Lottie, which has libraries available for Android, iOS, web, and React Native. + +## Project Links +- [Documentation Site](https://airbnb.design/lottie/) +- [Lottie iOS](https://github.com/airbnb/lottie-ios) +- [Lottie Android](https://github.com/airbnb/lottie-android) +- [Lottie React Native](https://github.com/airbnb/lottie-react-native) +- [Lottie Web](https://github.com/airbnb/lottie-web) +- [Bodymovin Plugin](https://www.adobeexchange.com/creativecloud.details.12557.html) + +## Resources +- [Introducing Lottie (article)](https://airbnb.design/introducing-lottie/) +- [Codepen Examples using Lottie / Bodymovin](https://codepen.io/collection/nVYWZR/) +- [Lottie / Bodymovin Github Documentation Wiki](https://github.com/airbnb/lottie-web/wiki) diff --git a/examples/lottie/script.js b/examples/lottie/script.js new file mode 100644 index 0000000..8a0c4c1 --- /dev/null +++ b/examples/lottie/script.js @@ -0,0 +1,9 @@ +// You can see the data that was exported from After Effects at +// https://sparkbox.github.io/bouncy-ball/examples/lottie/data.json +bodymovin.loadAnimation({ + container: document.querySelector('ball'), + renderer: 'svg', + loop: true, + autoplay: true, + path: 'data.json' +}); diff --git a/index.html b/index.html index 3f54ee7..fdaf14c 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + Bouncy Ball - Compare Web Animation Techniques @@ -8,7 +9,8 @@ - + @@ -16,11 +18,15 @@ +

Bouncy Ball

Comparing web animation techniques by showing how to bounce a ball with each one.

- Fork me on GitHub + + Fork me on GitHub +
@@ -61,16 +67,21 @@

Bouncy Ball

+ +
- +
- +
@@ -78,8 +89,10 @@

Bouncy Ball

- Made by your friends at @hearsparkbox. + Made by your friends at + @hearsparkbox.
+ diff --git a/site/assets/styles.css b/site/assets/styles.css index 73852b6..1bf426c 100644 --- a/site/assets/styles.css +++ b/site/assets/styles.css @@ -301,6 +301,9 @@ iframe[scrolling='no'] { .selection-bar input[type="radio"]:checked + .label-popmotion { color: #FF1C68; } +.selection-bar input[type="radio"]:checked + .label-lottie { + color: #00E3C7; +} .demo-frame { width: 66px; /* 50px ball + 8px margin left/right */ height: 226px; /* 160px range + 50px ball + 8px margin top/bottom */ diff --git a/site/css/styles.css b/site/css/styles.css index 2cbf77b..5bef486 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -166,6 +166,7 @@ iframe[scrolling='no'] { & + .label-webgl { color: #AAAAAA; } & + .label-flash { color: #FF00FF; } & + .label-popmotion { color: #FF1C68; } + & + .label-lottie { color: #00E3C7; } /* stylelint-enable */ } }