Created
October 28, 2021 14:26
-
-
Save gavinmcfarland/adf1328e359acd30273dfb083465b5ae to your computer and use it in GitHub Desktop.
A Figma helper to animate viewport into view
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Tween, Queue, Easing } from 'tweeno' | |
| function animateIntoView(selection, duration?, easing?) { | |
| // Get current coordiantes | |
| let origCoords = { | |
| ...figma.viewport.center, | |
| z: figma.viewport.zoom | |
| } | |
| // Get to be coordiantes | |
| figma.viewport.scrollAndZoomIntoView(selection) | |
| let newCoords = { | |
| ...Object.assign({}, figma.viewport.center), | |
| z: figma.viewport.zoom | |
| } | |
| // Reset back to current coordinates | |
| figma.viewport.center = { | |
| x: origCoords.x, | |
| y: origCoords.y | |
| } | |
| figma.viewport.zoom = origCoords.z | |
| var settings = { | |
| // set when starting tween | |
| from: origCoords, | |
| // state to tween to | |
| to: newCoords, | |
| // 2 seconds | |
| duration: duration || 1000, | |
| // repeat 2 times | |
| repeat: 0, | |
| // do it smoothly | |
| easing: easing || Easing.Cubic.Out, | |
| }; | |
| var target = { | |
| ...origCoords, | |
| update: function () { | |
| figma.viewport.center = { x: this.x, y: this.y } | |
| figma.viewport.zoom = this.z | |
| // console.log(Math.round(this.x), Math.round(this.y)) | |
| } | |
| }; | |
| var queue = new Queue(), | |
| tween = new Tween(target, settings); | |
| // add the tween to the queue | |
| queue.add(tween); | |
| // start the queue | |
| queue.start(); | |
| let loop = setInterval(() => { | |
| if (queue.tweens.length === 0) { | |
| clearInterval(loop) | |
| } | |
| else { | |
| queue.update(); | |
| // update the target object state | |
| target.update(); | |
| } | |
| }, 1) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment