A layer management module for Framer that resembles an SPA router.
{ Router, Route, Link } = require 'Router'
router = new Router
indexRoute: 'RouteOne'
RouteOne = new Route
router: router
name: 'RouteOne'
RouteTwo = new Route
router: router # connect it to your router
name: 'RouteTwo' # give your route a name
x: 755
RouteOne.onClick () ->
router.push('RouteTwo')
# Or, you can use the Link API
Button = new Link
router: router
to: 'RouteTwo'
parent: RouteOne
By default, framer-router will just toggle visibilty. When you want to animate things, each Route
has an optional onEnter
and onLeave
hook. Both onEnter
and onLeave
can call a callback function that simply emits routeDidLeave
and routeDidEnter
respectively.
# You can use a state machine, or just the `animate` API to manage intros and outros
RouteOne.onEnter = () ->
@animate
properties:
y: 0
scale: 1
curve: "spring(400,40,0)"
RouteOne.onLeave = () ->
@animate
properties:
y: 500
scale: .5
curve: "spring(400,60,0)"
...
RouteTwo.onEnter = (done) ->
@animate
properties:
x: 0
curve: "spring(400,40,0)"
done() # emits 'routeDidEnter' event
RouteTwo.onLeave = (done) ->
@animate
properties:
x: 755
curve: "spring(400,60,0)"
done() # emits 'routeDidLeave' event
Get in touch on twitter @jaredpalmer with any questions or file an issue.