These companies prototype with Framer
Generate assets out of Photoshop to set up new projects.
Animate any layer in 3D space with spring physics and bezier curves.
Hardware accelerated for high frame rates, based on CSS transforms.
Works on desktop, mobile and tablets. Plays well with WebKit.
# Define the imageLayer
Icon = new Layer({x:0, y:0, width:128, height:128})
Icon.image = "images/icon.png"
Icon.center()
# Define a state
Icon.states.add({
bounce: {scale: 0.8},
hue: {hueRotate: -20},
rotate: {rotationZ: 90}
})
# Set the animation options
Icon.states.animationOptions = {
curve: "spring(600,18,0)"
}
# On click, go to the next state
Icon.on(Events.Click, function(event) {
Icon.states.next()
})Framer is a JavaScript framework that makes creating realistic prototypes a breeze – complete with filters, spring physics and full 3D effects. Define interactions and create animations in a simple, readable and powerful way.
Framer Generator is a desktop app that imports the resources and folder hierarchy from Photoshop files (Sketch coming soon). Once your visual design is done, import your file with Framer Generator and immediately start to add interaction and animation.
Generate resources from Photoshop
Edit JavaScript to add interaction & animation
View in the browser on desktop & mobile