javascripttypescriptprototypingframerjs

FramerJS - How to Reset or Refresh Prototype from code, without reloading?

How to reset a FramerJS prototype programatically (through code)?

I have defined a layer on clicking of which I want the prototype to reset to its initial state. I have tried using location.reload() but that reloads from network. How to reset without reloading the prototype from network?

Solution

  • You can achieve this by calling Framer.CurrentContext.reset() and rebuilding your prototype.

    To make this easy, write all your setup code inside a function that you call after resetting the context. Remember to also call the setup() function for the initial setup.

    Example:

    setup = ->
    # Everything should go inside the setup() function
    layerA = new Layer
        backgroundColor: 'green'

    layerA.animate
        properties:
            x: Align.right

    resetButton = new Layer
        x: Align.center
        y: Align.bottom
        backgroundColor: 'red'

    resetButton.onClick ->
        Framer.CurrentContext.reset()
        #Call setup() again to recreate all layers
        setup() 

# Initial setup call
setup()

    Full prototype here: http://share.framerjs.com/9fl1g7icvnax/