31:Tb93,{ let dom = html`

` yield dom; await visibility(); 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) } }) }) }32:[] 2f:{"title":"Hello, three-elements + popmotion","cells":[{"id":0,"value":"md`# Hello, three-elements + popmotion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`three-elements , popmotion.io -- Inspired by the three-elements example here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"html`Scroll down to get to the example. Have to do this because of some initialization issues... mouseover to see the object grow and rotate. Mouse off to see it shrink back.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"html`

Codes

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