The avatar for @bherbertlc
Brian Herbert
Public
Edited
Oct 13, 2022
Insert cell
# HTML Animations
Insert cell
mutable num = 1
Insert cell
num
Insert cell
function upVal() {
console.log(`upnum, vals len ${values.length}`)
var newVal = valIdx + 1
mutable valIdx = newVal % values.length
}
Insert cell
Inputs.button("Up", {value: null, reduce: upVal})
Insert cell
values = ["Apple", "Banana", "Canteloupe", "Durian", "Elderberry"]
Insert cell
mutable valIdx = 0
Insert cell
viewof greeting = htl.html`<b>${values[valIdx]}</b>`
Insert cell
Inputs.textarea({label: htl.html`<h2>Notes:</h2>`, placeholder: "Optional extra info"})
Insert cell
<div class="fadetext">
<p>Fade-in Text</p>
</div>
Insert cell
style = html`<style>
.button {
border: none;
border-radius: 3vw;
color: white;
padding: 20px 40px;
text-align: center;
text-decoration: none;
//display: inline-block;
font-size: 30px;
margin: 2vw 2vw;
width: 250px;
height: 80px;
cursor: pointer;
background-color: #4CAF50;
}

.fadetext {
font-family: Arial;
font-size: 60px;
animation: fadeIn 5s;
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.pulse {
border-radius: 25px;
border: 2px solid #73AD21;
width: 200px;
text-align: center;
animation: pulse 1s 2 ease-in-out alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(2); }
}

.textchange {
text-align: center;
transform: scale(1);
transition: transform 0.3s ease-out;
}

</style>

<div class="fadetext"><img src="https://play-lh.googleusercontent.com/03u7ovx5WUvmOWJDIxlNYaQY60hgcNzyRKQ5Bugex_zl-UXrxxXY4ROHEm179xly9OFr=s26-rw" /></div>
`
Insert cell
i said <div class = "pulse">${idx}</div> there
Insert cell
mutable idx = 0
Insert cell
Inputs.button("More", {reduce: () => mutable idx += 1})
Insert cell
<img src="https://play-lh.googleusercontent.com/03u7ovx5WUvmOWJDIxlNYaQY60hgcNzyRKQ5Bugex_zl-UXrxxXY4ROHEm179xly9OFr=s26-rw" class="pulse" />
Insert cell
showBeforeAfter(4, "hi", "bye")
Insert cell
showBeforeAfter(8, "yo", "☮️")
Insert cell
import {showBeforeAfter} from "@bherbertlc/simple-timed-change"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more