25:null 26:["$","title",null,{"children":"Hello, three-elements + popmotion | Andrew Wooldridge | Observable"}] 2b:Tb7b,{ let dom = html`

` yield dom; const thingy = document.getElementById("thingy") console.log(thingy) const idleScale = parseFloat(thingy.getAttribute("scale")) console.log(idleScale) let rotateSpeed = 0 let scaleAnimation let colorAnimation let speedAnimation thingy.tick = (dt) => { console.log("tick") if (rotateSpeed > 0) { thingy.object.rotateX(rotateSpeed * 0.8 * dt) thingy.object.rotateY(rotateSpeed * 0.4 * dt) thingy.object.rotateZ(rotateSpeed * dt) thingy.game.requestFrame() } } const stopAnimations = () => { scaleAnimation && scaleAnimation.stop() colorAnimation && colorAnimation.stop() speedAnimation && speedAnimation.stop() } thingy.addEventListener("pointerenter", () => { stopAnimations() console.log("pointer enter") speedAnimation = popmotion.animate({ from: rotateSpeed, to: 2, duration: 1000, onUpdate: (v) => (rotateSpeed = v) }) scaleAnimation = popmotion.animate({ from: thingy.object.scale.x, to: idleScale * 1.5, onUpdate: (v) => { thingy.object.scale.setScalar(v) } }) colorAnimation = popmotion.animate({ from: thingy.object.material.color.getStyle(), to: "#fff", onUpdate: (v) => { thingy.object.material.color.setStyle(v) } }) }) thingy.addEventListener("pointerleave", () => { stopAnimations() console.log("pointerleave") speedAnimation = popmotion.animate({ from: rotateSpeed, to: 0, duration: 500, onUpdate: (v) => (rotateSpeed = v) }) scaleAnimation = popmotion.animate({ from: thingy.object.scale.x, to: idleScale, onUpdate: (v) => { thingy.object.scale.setScalar(v) } }) colorAnimation = popmotion.animate({ from: thingy.object.material.color.getStyle(), to: "#666", onUpdate: (v) => { thingy.object.material.color.setStyle(v) } }) }) }2c:[] 29:{"id":"9bae9cd7a4d0ebdf","slug":"hello-three-elements/2","title":"Hello, three-elements + popmotion","thumbnail":"b0076540c2177c280eaee43df85d5e9dc65cdca9f832933bdb7e8d16832265b3","access_level":"public","create_time":"$D2021-02-06T07:10:12.957Z","update_time":"$D2021-02-06T08:08:55.001Z","view_time":null,"first_public_time":"$D2021-02-06T07:18:53.400Z","has_unpublished_edits":null,"fork":{"id":"da94ff70178dfd78","slug":"hello-three-elements","title":"Hello, three-elements","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024"},"version":66,"publish_version":66,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Hello, three-elements + popmotion","cells":[{"id":0,"value":"md`# Hello, three-elements + popmotion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`three-elements , popmotion.io -- Inspired by the three-elements example here.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"html`

Codes

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import('https://unpkg.com/three-elements@0.3.0/dist/index.esm.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"popmotion = require('popmotion@9.1.0/dist/popmotion.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 2a:"$29:body"