Merge pull request #13 from samuelOsborne/v1.2.3

V1.2.3
samuelOsborne · May 18, 2021 · 5a80030 · 5a80030
2 parents ef5aade + b49c4d9
commit 5a80030
Show file tree

Hide file tree

Showing 11 changed files with 3,799 additions and 8,094 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
 .idea
-node_modules
-build
 
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
diff --git a/.npmignore b/.npmignore
@@ -1,3 +1,29 @@
+# IDE
+.vscode
 .idea
+.history
+.editorconfig
+.eslintignore
+.eslintrc
+
+# CI/CD
+.travis.yml
+
+# Source code
+src
 node_modules
-examples
+examples
+
+# Configs
+serve-examples.js
+jest.config.js
+rollup.config.js
+tsconfig.json
+webpack.config.js
+
+# Docs
+docs/
+examples/
+
+# assets
+assets/lottie-interactive.png
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-![alt Lottie-interactive](assets/lottie-interactive.png?raw=true)
+![alt Lottie-interactive](https://github.com/samuelOsborne/Lottie-interactive/blob/master/assets/lottie-interactive.png?raw=true)
 
 Lottie interactive is custom web element adding multiple types of interactivity to Lottie animations.
 
@@ -115,6 +115,19 @@ Makes the animation play automatically on load
 <lottie-interactive path="button.json" autoplay></lottie-interactive>
 ```
 
+##### speed
+Sets the speed of the animation
+```HTML
+<lottie-interactive path="button.json" speed="0.5"></lottie-interactive>
+```
+
+##### delay
+Delay the loading of the animation, defined in milliseconds
+```HTML
+<lottie-interactive path="button.json" delay="3000"></lottie-interactive>
+```
+
+
 ##### reset
 Resets the animation to the first frame after it has finished playing
 ```HTML

diff --git a/dist/lottie-interactive.js b/dist/lottie-interactive.js
diff --git a/examples/aspect-ratio/aspect-ratio.html b/examples/aspect-ratio/aspect-ratio.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Aspect-ratio example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+<div style="display: flex">
+  <div class="content-left">
+    <h1 style="text-align: center; font-family: 'Verdana', serif;">
+      Attribute: 'aspect-ratio'
+    </h1>
+    <div style="text-align: center">
+      <lottie-interactive path="../animations/svgenius-logo.json"
+                          loop
+                          autoplay
+                          view-box="0 0 500 300"
+                          aspect-ratio="xMaxYMax slice">
+      </lottie-interactive>
+      <lottie-interactive path="../animations/svgenius-logo.json"
+                          loop
+                          autoplay
+                          view-box="0 0 500 300"
+                          aspect-ratio="xMaxYMax ">
+      </lottie-interactive>
+    </div>
+  </div>
+</div>
+</body>
+</html>
+
+<style>
+  .content-left {
+    float: left;
+    margin: auto;
+  }
+</style>
diff --git a/examples/delay/delay.html b/examples/delay/delay.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Speed example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.5"
+                      autoplay
+                      loop
+                      delay="5000">
+  </lottie-interactive>
+</div>
+<h1>
+  Delay: 5000
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.4"
+                      autoplay
+                      loop
+                      delay="4000">
+  </lottie-interactive>
+</div>
+<h1>
+  Delay: 4000
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.3"
+                      autoplay
+                      loop
+                      delay="3000">
+  </lottie-interactive>
+</div>
+<h1>
+  Delay:  3000
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.2"
+                      autoplay
+                      loop
+                      delay="2000">
+  </lottie-interactive>
+</div>
+<h1>
+  Delay:  2000
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.1"
+                      autoplay
+                      loop
+                      delay="1000">
+  </lottie-interactive>
+</div>
+<h1>
+  Delay:  1000
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.1"
+                      autoplay
+                      loop>
+  </lottie-interactive>
+</div>
+<h1>
+  No delay
+</h1>
+</body>
+</html>
+
+<style>
+  h1 {
+    text-align: center;
+    font-family: 'Verdana', serif;
+  }
+</style>