2c:null 2d:["$","title",null,{"children":"Playful “bulging” inputs like on the \\`anime.js\\` homepage | Kelley van Evert | Observable"}] 32:T48a,html` ${md`\`\`\`javascript // import it import { slider, toggle, paged } from "@kelleyvanevert/pretty-anime-js-sliders" \`\`\``}

${md`

Slider

\`\`\`javascript // just use it viewof my_scalar = slider() // options & defaults viewof my_scalar = slider({ // numerics value: /* halfway min and max */, min: 0, max: 1, step: 0.01, // visuals width: 300, height: 34, title: undefined, format: ".2r", // see d3-format fill: "#07c", stroke: "black", }) \`\`\``}

${md`

Toggle

\`\`\`javascript // just use it viewof my_boolean = toggle() // options & defaults viewof my_boolean = toggle({ // initial value value: false, // visuals width: 34, height: 34, title: undefined, fill: "#07c", stroke: "black", }) \`\`\``}

${md`

Aggregate inputs

\`\`\`javascript viewof viewmodel = paged({ some_var: slider({ ... }), some_other_var: toggle({ ... }), }) \`\`\``}

`33:T1282,function slider (options) { options = options || {}; const { min = 0, max = 1, width = 300, height = 34, step = 0.01, format = ".2r", fill = "#07c", stroke = "#000", title = undefined, } = options; const quantize = v => Math.min(max, Math.max(min, Math.round(v / step) * step)); const fmt = d3.format(format); let value = quantize((options.value != undefined) ? options.value : (min + .5 * (max-min))); const W = width; const H = height; //const padx = 2; //const pady = 5; const padx = 2 + 0.01 * H; const pady = 2 + 0.01 * W; const h = .2; function path (bulge) { const dx = bulge * padx; const dy = bulge * pady; return [ "M", 0, 0, "C", h*W, -dy, (1-h)*W, -dy, W, 0, "C", W+dx, h*H, W+dx, (1-h)*H, W, H, "C", (1-h)*W, H+dy, h*W, H+dy, 0, H, "C", -dx, (1-h)*H, -dx, h*H, 0, 0, "Z", ].join(" "); } const svgdim = { left: -padx-1, top: -pady-1, width: W + 2*(padx+1), height: H + 2*(pady+1), }; const instance = new Vue({ el: html`

      
            {{ min }}
            {{ title }}
            {{ max }}
          
            {{ min }}
            {{ title }}
            {{ max }}
          
      {{ fmt(value) }}

`, data () { return { min, max, value, title, bulge_clip: DOM.uid(), fill_clip: DOM.uid(), unfill_clip: DOM.uid(), hovering: false, dragging: false, bulge: 0, fill, stroke, }; }, computed: { active () { return this.hovering || this.dragging; }, }, methods: { path, quantize, fmt, drag () { this.dragging = true; const x = d3.mouse(this.$el)[0]; const p = Math.max(0, Math.min(1, x / (W+2*padx))); this.value = this.min + p * (this.max - this.min); }, observable_notify () { this.$el.value = this.value; this.$el.dispatchEvent(new CustomEvent("input", { bubbles: true })); }, }, watch: { value: "observable_notify", active (b) { if (this._active_anim) this._active_anim.pause(); this._active_anim = anime({ targets: this.$data, duration: 500, easing: "easeOutElastic", bulge: b ? 1 : 0, }); }, }, mounted () { d3.select(this.$refs.area) .call(d3.drag() .on("start", () => this.drag()) .on("drag", () => this.drag()) .on("end", () => this.dragging = false) ) this.observable_notify(); }, }); return instance.$el; }34:Te7f,function toggle (options) { options = options || {}; const { width = 34, height = 34, fill = "#0db72d", stroke = "#000", title = undefined, } = options; let value = (options.value != undefined) ? !!options.value : false; const W = width; const H = height; const padx = 2 + 0.01 * H; const pady = 2 + 0.01 * W; const h = .2; function path (bulge) { const dx = bulge * padx; const dy = bulge * pady; return [ "M", 0, 0, "C", h*W, -dy, (1-h)*W, -dy, W, 0, "C", W+dx, h*H, W+dx, (1-h)*H, W, H, "C", (1-h)*W, H+dy, h*W, H+dy, 0, H, "C", -dx, (1-h)*H, -dx, h*H, 0, 0, "Z", ].join(" "); } const svgdim = { left: -padx-1, top: -pady-1, width: W + 2*(padx+1), height: H + 2*(pady+1), }; const instance = new Vue({ el: html`

      
            {{ title }}
          
            {{ title }}
          
      {{ fmt(value) }}

`, data () { return { value, title, bulge_clip: DOM.uid(), fill_clip: DOM.uid(), unfill_clip: DOM.uid(), hovering: false, bulge: value ? 1 : 0, fill, stroke, }; }, computed: { active () { return this.hovering || this.value; }, }, methods: { fmt (b) { return b ? "true" : "false"; }, path, click () { this.value = !this.value; }, observable_notify () { this.$el.value = this.value; this.$el.dispatchEvent(new CustomEvent("input")); }, }, watch: { value: "observable_notify", active (b) { if (this._active_anim) this._active_anim.pause(); this._active_anim = anime({ targets: this.$data, duration: 500, easing: "easeOutElastic", bulge: b ? 1 : 0, }); }, }, mounted () { this.observable_notify(); }, }); return instance.$el; }35:Tb22,{ const options = { min: -1, max: 1, step: 0.0001, format: ".2r", title: "bulge", }; const { min, max, step, format, title } = options; const quantize = v => Math.min(max, Math.max(min, Math.round(v / step) * step)); const fmt = d3.format(format); let value = 0.56//quantize((options.value != undefined) ? options.value : (min + .5 * (max-min))); const h = 60; function path (bulge) { const dx = bulge * 2; const dy = bulge * 5; return `M0 0 C${h},${-dy} ${300-h},${-dy} 300,0 C${300+dx},10 ${300+dx},20 300,30 C${300-h},${30+dy} ${h},${30+dy} 0,30 C${-dx},20 ${-dx},10 0,0 Z`; } const instance = new Vue({ el: html`

      
      {{ fmt(value) }}
      {{ title }}

`, data () { return { min, max, value, title, uid: DOM.uid(), hovering: false, dragging: false, fill: "#07c", stroke: "#000", }; }, computed: { active () { return this.hovering || this.dragging; }, bulge () { return this.value; }, }, methods: { path, quantize, fmt, drag () { this.dragging = true; const x = d3.mouse(this.$el)[0]; const p = Math.max(0, Math.min(1, x / 304)); this.value = this.min + p * (this.max - this.min); }, observable_notify () { this.$el.value = this.value; this.$el.dispatchEvent(new CustomEvent("input")); }, }, watch: { value: "observable_notify", }, mounted () { d3.select(this.$refs.area) .call(d3.drag() .on("start", () => this.drag()) .on("drag", () => this.drag()) .on("end", () => this.dragging = false) ) this.observable_notify(); }, }); return instance.$el; }36:[] 30:{"id":"4b5c3a6637985b47","slug":"pretty-anime-js-sliders","title":"Playful “bulging” inputs like on the \\`anime.js\\` homepage","thumbnail":"2da164373e36f8055429ad59773d9f0d5729950c6581f48a78577ac2449cf4a9","access_level":"public","create_time":"$D2018-10-25T19:48:19.813Z","update_time":"$D2023-04-03T15:16:16.845Z","view_time":null,"first_public_time":"$D2018-10-25T19:49:32.549Z","has_unpublished_edits":null,"fork":{"id":"24f11528cae11347","slug":"reimplementating-an-animated-svg-icon-by-chris-gannon","title":"Reimplementating an animated SVG icon by Chris Gannon","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"stars":28,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":1828,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Playful “bulging” inputs like on the \\`anime.js\\` homepage","cells":[{"id":1290,"value":"md`# Playful “bulging” inputs like on the \\`anime.js\\` homepage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"md`Nothing particularly new here, just bringing the wonderful button animation from the [\\`anime.js\\` homepage](http://animejs.com/) to Observable inputs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1792,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1768,"value":"md`## Slider`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1774,"value":"viewof s = slider({ title: \"some var\", value: .32 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1799,"value":"s","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1790,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"md`## Toggle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1784,"value":"viewof b = toggle({ title: \"A?\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1796,"value":"b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1794,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1782,"value":"md`## Aggregate inputs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"viewof x = paged({\n a: slider({ min: 0, max: 1, value: .73 }),\n b: slider({ min: 0, max: 100, value: 60, width: 240, height: 100, title: \"BIG RED SLIDER\", fill: \"#c00\" }),\n c: toggle(),\n d: toggle({ title: \"some crazy big boolean value\", width: 500, height: 100, value: true }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"x","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"md`## Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1815,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1817,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1517,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"function paged (inputs) {\n const root = html`

`;\n root.value = {};\n \n Object.entries(inputs).forEach(([key, input]) => {\n root.value[key] = input.value;\n input.addEventListener('input', (e) => {\n root.value[key] = input.value;\n root.dispatchEvent(new CustomEvent(\"input\"));\n //e.preventDefault();-\n });\n const contain = DOM.element('div');\n contain.appendChild(input);\n root.appendChild(contain);\n });\n \n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"md`**Bonus material: a slider that sets its own bulge :D**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1315,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"anime = require('https://bundle.run/animejs@3.0.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"Vue = require(\"vue@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"