Skip to content

Commit

Permalink
Merge pull request #16 from samuelOsborne/FAST-migration
Browse files Browse the repository at this point in the history 
Migration to Microsoft FAST and new interactions
  • Loading branch information
@samuelOsborne
samuelOsborne authored Jun 20, 2021
2 parents 605d00d + ce701b9 commit 55812e6
Show file tree
Hide file tree
Showing 28 changed files with 868 additions and 309 deletions.
8 changes: 8 additions & 0 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ <h1>Examples</h1>
<li><a href="./morph/morph.html">Interaction: Morph</a></li>
<li><a href="./morphLock/morph-lock.html">Interaction: Morph lock</a></li>
<li><a href="./play-on-show/play-on-show.html">Interaction: Play-on-show</a></li>
<li><a href="./multiple-interactions/show-and-click.html">Show and click</a></li>
<li><a href="./multiple-interactions/show-and-hover.html">Show and hover</a></li>
<li><a href="./multiple-interactions/show-and-freeze-click.html">Show and freeze click</a></li>
<li><a href="./multiple-interactions/show-and-morph.html">Show and morph</a></li>
<li><a href="./multiple-interactions/show-and-morph-lock.html">Show and morph-lock</a></li>
<li><a href="./multiple-interactions/show-and-switch.html">Show and switch</a></li>
<li><a href="./play-once/play-once.html">Interaction: Play-once</a></li>
<li><a href="./switch/switch.html">Interaction: Switch</a></li>
<li><a href="./viewbox/viewbox.html">Attribute: view-box</a></li>
Expand All @@ -29,6 +35,8 @@ <h1>Examples</h1>
<li><a href="./autoplay/autoplay.html">Attribute: Autoplay</a></li>
<li><a href="./stroke/width.html">Attribute: s-width</a></li>
<li><a href="./stroke/color.html">Attribute: s-color</a></li>
<li><a href="./delay/delay.html">Attribute: delay</a></li>
<li><a href="./speed/speed.html">Attribute: speed</a></li>
</ul>
</body>
</html>
Expand Down
52 changes: 52 additions & 0 deletions examples/multiple-interactions/show-and-click.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show-and-click example</title>
<script type="module" src="../../dist/lottie-interactive.js"></script>
</head>

<body>
<h1>
Interaction: 'Show-and-click'
</h1>
<div class="filler">
<h1>Scroll down!</h1>
</div>
<h1>Interaction: 'show-and-click'</h1>
<div class="animation-container">
<lottie-interactive path="../animations/lottie-interactive.json"
interaction="show-and-click">
</lottie-interactive>
</div>
</body>
</html>

<style>
h1 {
text-align: center;
font-family: 'Verdana', serif;
margin: 0;
background-color: palevioletred;
color: white;
}

.filler {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: palevioletred;
color: #ffffff;
text-align: center;
font-family: "Verdana", serif;
}

.animation-container {
width: 100%;
height: 100%;
background-color: #ADFF9E;
text-align: center;
}
</style>
52 changes: 52 additions & 0 deletions examples/multiple-interactions/show-and-freeze-click.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show-and-click example</title>
<script type="module" src="../../dist/lottie-interactive.js"></script>
</head>

<body>
<h1>
Interaction: 'show-and-freeze-click'
</h1>
<div class="filler">
<h1>Scroll down!</h1>
</div>
<h1>Interaction: 'show-and-freeze-click'</h1>
<div class="animation-container">
<lottie-interactive path="../animations/lottie-interactive.json"
interaction="show-and-freeze-click">
</lottie-interactive>
</div>
</body>
</html>

<style>
h1 {
text-align: center;
font-family: 'Verdana', serif;
margin: 0;
background-color: palevioletred;
color: white;
}

.filler {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: palevioletred;
color: #ffffff;
text-align: center;
font-family: "Verdana", serif;
}

.animation-container {
width: 100%;
height: 100%;
background-color: #ADFF9E;
text-align: center;
}
</style>
52 changes: 52 additions & 0 deletions examples/multiple-interactions/show-and-hover.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show-and-click example</title>
<script type="module" src="../../dist/lottie-interactive.js"></script>
</head>

<body>
<h1>
Interaction: 'show-and-hover'
</h1>
<div class="filler">
<h1>Scroll down!</h1>
</div>
<h1>Interaction: 'show-and-hover'</h1>
<div class="animation-container">
<lottie-interactive path="../animations/lottie-interactive.json"
interaction="show-and-hover">
</lottie-interactive>
</div>
</body>
</html>

<style>
h1 {
text-align: center;
font-family: 'Verdana', serif;
margin: 0;
background-color: palevioletred;
color: white;
}

.filler {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: palevioletred;
color: #ffffff;
text-align: center;
font-family: "Verdana", serif;
}

.animation-container {
width: 100%;
height: 100%;
background-color: #ADFF9E;
text-align: center;
}
</style>
52 changes: 52 additions & 0 deletions examples/multiple-interactions/show-and-morph-lock.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show-and-click example</title>
<script type="module" src="../../dist/lottie-interactive.js"></script>
</head>

<body>
<h1>
Interaction: 'show-and-morph-lock'
</h1>
<div class="filler">
<h1>Scroll down!</h1>
</div>
<h1>Interaction: 'show-and-morph-lock'</h1>
<div class="animation-container">
<lottie-interactive path="../animations/sun-moon.json"
interaction="show-and-morph-lock">
</lottie-interactive>
</div>
</body>
</html>

<style>
h1 {
text-align: center;
font-family: 'Verdana', serif;
margin: 0;
background-color: palevioletred;
color: white;
}

.filler {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: palevioletred;
color: #ffffff;
text-align: center;
font-family: "Verdana", serif;
}

.animation-container {
width: 100%;
height: 100%;
background-color: #ADFF9E;
text-align: center;
}
</style>
52 changes: 52 additions & 0 deletions examples/multiple-interactions/show-and-morph.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show-and-click example</title>
<script type="module" src="../../dist/lottie-interactive.js"></script>
</head>

<body>
<h1>
Interaction: 'show-and-morph'
</h1>
<div class="filler">
<h1>Scroll down!</h1>
</div>
<h1>Interaction: 'show-and-morph'</h1>
<div class="animation-container">
<lottie-interactive path="../animations/lottie-interactive.json"
interaction="show-and-morph">
</lottie-interactive>
</div>
</body>
</html>

<style>
h1 {
text-align: center;
font-family: 'Verdana', serif;
margin: 0;
background-color: palevioletred;
color: white;
}

.filler {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: palevioletred;
color: #ffffff;
text-align: center;
font-family: "Verdana", serif;
}

.animation-container {
width: 100%;
height: 100%;
background-color: #ADFF9E;
text-align: center;
}
</style>
52 changes: 52 additions & 0 deletions examples/multiple-interactions/show-and-switch.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show-and-click example</title>
<script type="module" src="../../dist/lottie-interactive.js"></script>
</head>

<body>
<h1>
Interaction: 'show-and-switch'
</h1>
<div class="filler">
<h1>Scroll down!</h1>
</div>
<h1>Interaction: 'show-and-switch'</h1>
<div class="animation-container">
<lottie-interactive path="../animations/lottie-interactive.json"
interaction="show-and-switch">
</lottie-interactive>
</div>
</body>
</html>

<style>
h1 {
text-align: center;
font-family: 'Verdana', serif;
margin: 0;
background-color: palevioletred;
color: white;
}

.filler {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: palevioletred;
color: #ffffff;
text-align: center;
font-family: "Verdana", serif;
}

.animation-container {
width: 100%;
height: 100%;
background-color: #ADFF9E;
text-align: center;
}
</style>
2 changes: 1 addition & 1 deletion examples/play-on-show/play-on-show.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Morph example</title>
<title>Play-on-show example</title>
<script type="module" src="../../dist/lottie-interactive.js"></script>
</head>

Expand Down
15 changes: 13 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
},
"homepage": "https://github.com/samuelOsborne/Lottie-interactive#readme",
"dependencies": {
"@microsoft/fast-element": "^1.4.0",
"lottie-web": "^5.7.8"
},
"devDependencies": {
Expand Down
Loading

0 comments on commit 55812e6

Please sign in to comment.