In this section, we give you an overview of how code is used to create interactions in Framer, as well as a few simple pointers on how to set yourself up for success.
Briefly skim through this guide to familiarize yourself with concepts, but don’t feel like you need to thoroughly understand everything before getting started. We’ve developed Framer as a conceptual learning tool. To that end, we’ve added many features that are designed to help lower the learning curve to code. From simplified language and Auto-Code to intuitive error messaging and in-app documentation, Framer guides you as you go.
If you’re familiar with the basics, check out our programming guide on how to express more complex behavior like logic, variables and loops.
There are three main ways to begin adding interaction in Framer. In this guide, we teach you about the relationship between our Code and Design modes, how to import from an external graphics tool and how to add a layer using code.
For an optimal Framer workflow, we recommend you set up your designs directly in the Design tab. You can draw directly on the canvas or use device-specific artboards. Framer Design has been optimized for code-based interaction design work so it is highly intuitive and responsive. Hierarchy, layout and grouping in Design have been programmed to work seamlessly with our Code mode. When you’re finished with Design, simply toggle on the target icon for any layers you want to animate, switch over to Code mode and begin adding interactions.
Another way to use Framer is to import your designs from Sketch, Figma and Photoshop. You can import any grouped layers, add animations in Code and then switch back to your favorite graphics tools and make changes as needed. We offer full-integration, so this workflow can be as seamless as a few clicks.
Lastly, you may add layers directly by typing
layerA = new Layer directly into the code editor. While we don’t recommend this workflow, it may come in handy in instances when you want to use Framer for quick concepting or ideation.
On the code side of Framer, you’ll see a preview window that gives you real-time visual feedback on any changes you make in Code or Design. You can also drag, drop and resize layers directly in this window.
Framer’s preview window offers real-time feedback on designs made in either the Design or Code tab. To replay animations, simple hit
CMD + R to reload. The window snaps to the chrome but can be completely detached for a larger workspace. To view your design on multiple screens, simply select from the dropdown menu of devices in the top navigation bar of the preview window.
If you created your design directly on the canvas in Design, all of the layers you insert will not contain a parent artboard. Placing your layer on
the x: 0 and y: 0 position values will position the layer to the top left of the preview window.
In Framer, artboards are more than placeholders. They have been engineered to account for responsive device work.
From the beginning, we prompt you to select the device you are designing for, with a full spectrum of watch, mobile, computer, tablet and TV devices available. After you select your device of choice, Framer instantly adapts the preview in the code tab to your device of choice. You can change this at any time by selecting a different device from the preview window dropdown.
Design to Code
If you design in artboards in Framer your design will translate into code perfectly. Every artboard is automatically set up to be the parent of all the layers placed in the artboard. Targeting an artboard in the code will automatically also target all of its child layers. This will make setting up interactions like a FlowComponent easier than ever.
# Set up a flow from your artboardsflow.showNext(ArtboardA)ArtboardA.onClick ->flow.showNext(ArtboardB)ArtboardB.onClick ->flow.showPrevious()
If you’ve ever used a visual design tool, you’ll already be familiar with the concept of a Layer. Without content, it’s simply a rectangle. But it can contain an image, a video, audio, text, and much more.
Inserting & Targeting
Inserting a layer is as simple as drawing something in the design tab and switching back to the code.
When you have set up your layers in the design tab and made the layers you want to target targetable, you are ready to start coding. To target a layer you have designed directly in Framer simply insert its name followed by the behaviour you want to add to it.
# Target and animate a layer from your designmy_layer.animatey: 200options:time: 1curve: Bezier.ease
The layers you design in Framer have many types of properties. Ones that define its position, appearance and if you decide to add them in code, interactivity. All of these properties can be overridden directly with code. For example, you can define a red background, but override this with blue in code.
# Background layer overridebackground.backgroundColor = "#28affb"
A layer has a ton of visual properties. You can transform it, scale it, hide it and more. After having created a layer, in design, you can still override these properties in code.
# Override propertieslayerB.borderRadius = 4layerB.rotation = 45layerB.opacity = 0.5layerB.scale = 0.5
A great way to explore all layer properties is by using Auto Code. When switching from the design tab simply click animation and select your desired layer. The Auto Code panel will automatically show up for you to drag around the layer directly in the preview window and edit its value.
In front of every layer you start to Auto Code, an edit icon appears. Click this to bring up the properties panel. For a list of all layer properties, check out our Docs.
A layer can be positioned with its x and y properties. These values define the distance from the top-left corner of the canvas.
# Position layerAlayerA.x = 200layerA.y = 200
Layers can also be positioned using dynamic properties.
Say you want to position one layer relative to another.
Instead of manually calculating the center point of this layer, you can simply use the
You can find all positioning properties in our Docs.
# Align to center of the x axis of layerAlayerB.x = layerA.midX# Align to center of the y axis of layerAlayerB.y = layerA.midY
You can center a layer within its parent by using the
child relationships are defined in the design tab but can easily be overriden in code.
Layers can also be exclusively centered horizontally or vertically.
See below for all available Align properties.
- Align.left (x)
- Align.right (x)
- Align.top (y)
- Align.bottom (y)
- Align.center (x and y)
# Define layerA as the parent of layerBlayerB.parent = layerA# Align layerB to the bottom right of its parentlayerB.x = Align.rightlayerB.x = Align.bottom
Aside from grouping layers in the design tab layers can also be grouped directly in code.
A layer placed within another layer is called a
child layer. The container layer is called the
Layers inherit properties from their parent layers, like their opacity or position.
# Two ways to define hierarchylayerB.parent = layerAlayerA.addChild(layerB)
If you want to place a layer in front of another layer, you can use the
placeBefore method. Vice versa, you can use
layerA = new LayerlayerB = new Layer# Place layerB on toplayerB.placeBefore(layerA)
Layers can be almost anything. Think backgrounds, images, videos, text and more. In the design tab you can add all of the standard layers. Code allows us to insert interactive elements into our design like video and audio. To add a video, for example, simply drag and drop the video into the code editor.
# Videovideo = new VideoLayervideo: "fish.mp4"
Framer offers the possibility to insert text directly in your design. The text translated into code can be manipulated with properties like animate. To make the text interactive, for example, change the text itself or its color, you can insert a Text Layer from the code tab. Text layers have unique text styling properties. The width and height is automatically calculated and set, depending on the text and its style.
# Create text layertitle = new TextLayertext: "Hello!"
Most of the text styling properties are inherited from CSS. You can find all of these properties and more in our Docs.
# Create text layertitle = new TextLayertext: "Hello!"fontSize: 64fontWeight: 600x: Align.centery: Align.center
Almost every layer property can be animated. Multiple properties can be animated at once. You can then continue to define the curve, time, delay and many more custom animation options.
Let’s start by animating the opacity of a layer. You can start animations by using the
animate keyword, and then defining a set of properties.
You can completely customize the feel of your animation, by changing options like time, curve and delay. Below is a list of the available options:
- time (in seconds)
- curve (Bezier, Spring)
- delay (in seconds)
- repeat (amount of times)
- colorModel (rgb, hsl, husl)
Durations in Framer are defined in seconds.
Add animation options by using the
options keyword, and indenting its properties.
# Animate with an easing curvelayerA.animaterotation: 180borderRadius: 200options:curve: Bezier.easetime: 1
Animations optionally take a curve that describe the type of animation.
You can use pre-defined curves like
Bezier.ease curve is the default in Framer. See all built-in easing curves below, or check out this website to learn more.
# Animate with an easing curvelayerA.animatescale: 0.75options:curve: Bezier.easedelay: 0time: 1
To make animations that feel truly native, you’ll want to work with spring curves. The bounciness of our spring curve can be customized with
damping and it can be used along with the
# Animate with a spring curvelayerA.animatescale: 0.75options:curve: Spring(damping: 0.5)time: 0.5
States allow you to define the different appearance options of a layer. A layer can have multiple states, each with a different set of properties. States can then be cycled through, with or without animation.
Think of states as a different way to manage multiple animations. You start by adding the states, and then animate or cycle betweem them.
In the example below, layerA is set to 100% opacity in the design tab. Next, a new state for layerA is defined, titled "fade", with an opacity set to 0.
# A new state titled "fade"layerA.states.fade =opacity: 0
For layerA to inherit the properties of the "fade" state, it needs to switch from the default state to the "fade" state.
# Animate to the statelayerA.animate("fade")# Instantly switch to the statelayerA.stateSwitch("fade")
States can also be cycled between, using
Just like with layer animations, you can also add animation options to states.
# Add states and animation optionslayerA.states.rotate =rotation: 0animationOptions:time: 1curve: Bezier.ease# Cycle between stateslayerA.onTap ->layerA.stateCycle()
To override states, simply add a new state with the same name.
# Override third statelayerA.states.rotate =rotation: 180
Events are things that can happen to layers, often triggered by user interaction. With events, you can animate layers based on these interactions. From simple taps and swipes to advanced multi-touch gestures.
Framer includes a ton of events.
The most common ones you may be familiar with, like
onScroll and like.
Events can also be caused by animations, state switches, page changes and the like.
And if you want to design more complex interactions, you can use the multi-touch gestures, like
layerA.onTap ->...layerA.onScroll ->...layerA.onSwipe ->...layerA.onAnimationEnd ->...
One of the most common use cases of events is toggling between a set of states on tap (which is click or touch).
# Toggle states on tapsettings.onTap ->settings.stateCycle()
Example: Animation Chaining
Events can be used to chain animations.
For example, you can start a new animation after another one ends by listening to the
# Animation EventslayerA.onAnimationStart ->...layerA.onAnimationEnd ->...
Below is a simple example of a chained animation. Every animation gets an AnimationEnd event, so they can be chained infinitely.
layerA.animatex: 80options:curve: Bezier.easelayerA.onAnimationEnd ->layerA.animatex: 0options:curve: Bezier.ease
Draggable layers include physics and many customizable properties that open up new creative possibilities. By accounting for things like the speed and the direction, you can take greater control over dragging interactions.
Let’s start by creating a draggable layer. Simply set
true. Now, you can pick it up, place it elsewhere, and toss it around.
You can also restrict the dragging direction, by disabling dragging horizontally or vertically. Both are enabled by default. You can also specify the speed. This provides accelerated or reduced dragging.
# Make the layer draggablelayerA.draggable.enabled = true# Prevent vertical dragginglayerA.draggable.horizontal = truelayerA.draggable.vertical = false# Alternative way by setting the speedlayerA.draggable.speedX = 1layerA.draggable.speedY = 0
In most cases, you’ll want to limit the range a layer can be dragged within. For example, think of the pull-to-refresh gesture, in which you can only drag a certain distance. This can be achieved with constraints.
x, y, width and height properties. Think of it as another layer, that contains your draggable layer.
# Make the layer draggablelayerA.draggable.enabled = true# Set the constraints framelayerA.draggable.constraints =x: 0y: 0width: 160height: 80
Overdrag, Bounce and Momentum
It’s likely you’re already familiar with these terms, even if you don’t know them by name. Let’s have a look at each of them.
A draggable layer can be dragged beyond its constraints, although it will snap back. This is called
overdrag. Think of Safari on iOS, where you can drag websites beyond the top and bottom of the pages.
When a layer is moving in a direction, it can also bounce beyond its constraints. This is called
bounce. It’s sort of like a rubber-band effect.
momentum to false disables the default physics of your draggable layer. You can still move it, but you can’t toss it around anymore. The momentum and bounce properties can also be customised. Have a look at this example of a custom draggable layer with constraints.
# Disable overdraglayerA.draggable.overdrag = false# Disable bouncelayerA.draggable.bounce = false# Disable momentumlayerA.draggable.momentum = false
The three fundamental dragging events that you can listen to are:
DragEnd. The Move event is fired whenever the draggable layer is moving. Unlike the DragMove event, this includes the momentum and bounce animations.
# Start dragginglayerA.onDragStart ->layerA.animatescale: 1.1# After dragginglayerA.onDragEnd ->layerA.animatescale: 1
There are two specific events that occur when momentum and bounce are enabled:
DragAnimationDidEnd. They occur after DragEnd, while the layer is animating.
# After DragEnd, the DragAnimation startslayerA.onDragAnimationStart ->layerA.animatescale: 0.8# Starts with the momentum and bouncelayerA.onDragAnimationEnd ->layerA.animatescale: 1
Pinchable layers can be scaled and rotated with two fingers. This multi-touch gesture is often seen in maps and photo apps, to zoom and navigation content.
In Framer for Mac, you can hold the
alt key while moving your cursor to bring up a second cursor. This allows you to emulate multi-touch gestures.
Just like with draggable layers, you can enable pinching by setting
layerA.pinchable.enabled = true
Pinchable layers contain
rotate properties, both enabled by default.
By disabling the scale, you can only rotate a pinchable layer, and vice versa.
# Disable scale on pinchlayerA.pinchable.scale = false# Disable rotation on pinchlayerA.pinchable.rotate = false
The three basic pinchable events are:
Let’s have a look at the last one. Pinching adjusts the actual scale and rotation properties of a layer.
So after a pinch, we can animate these properties back to their default values.
# Enable pinchinglayerA.pinchable.enabled = true# Animate back to original positionlayerA.onPinchEnd ->layerA.animatescale: 1rotation: 0options:curve: Spring(damping: 0.5)time: 0.5
If you enable both dragging and pinching, the layer also becomes pannable.
Panning is the same as dragging, except it’s a multi-touch gesture.
You can detect a pan with the
# Enable panninglayerA.draggable.enabled = truelayerA.pinchable.enabled = true# Animate back to original positionlayerA.onDragEnd ->layerA.animatescale: 1rotation: 0options:curve: Spring(damping: 0.5)time: 0.5
Think of a component as a bundle of layers, with pre-defined interactions. Like the SliderComponent, which allows you to add sliders without having to create all the elements from scratch. They’re completely customizable, but work out of the box.
The FlowComponent helps you quickly transition between multiple screens. It’s especially useful for turning static screens into fully interactive flows.
What’s unique about the FlowComponent is that it knows which screen you’re viewing. It keeps track of your history, allowing you to navigate back-and-forth at any time. By default it features detailed, native-feeling transitions. When switching screens, the current screen automatically animates out of view. And when adding an overlay like a modal dialog, the background gets a semi-transparant dark overlay, too.
Lets start by adding a layer to the FlowComponent. This works much like adding layers to the PageComponent, and can easily be done by using the
showNext function. The first layer you add doesn’t get animated.
# Create FlowComponent, show layerAflow = new FlowComponentflow.showNext(layerA)
You can use the
showNext function to transition to the next screen.
# Create FlowComponent, show layerflow = new FlowComponentflow.showNext(layerA)# Switch screens on clicklayerA.onClick ->flow.showNext(layerB)
Framer keeps track of which screen you’re currently viewing. You can switch back to the previous screen with the
# Switch to next screenlayerA.onClick ->flow.showNext(layerB)# Switch to previous screenlayerB.onClick ->flow.showPrevious()
With one of the
showOverlay functions, you can overlay any layer. The current screen gets a semi-transparent dark background. This is most noticable when overlaying a smaller layer, like a sidebar or an action sheet. You can specify one of the following directions:
# Create FlowComponentflow = new FlowComponent# Modal and button are set up in the design tab# Switch backbutton.onClick ->flow.showOverlayCenter(modal)
Any child layer that exceeds the height or width of the FlowComponent automatically becomes scrollable. It will be vertically scrollable if it’s taller, and horizontally scrollable if it’s wider. You can target this scrollable layer with flow.scroll. All scrolling properties and events can be used.
Layers positioned at the top or bottom of the artboard will be recognized as headers and footers, like a tab or navigation bar. Remember that your artboard has to exceed the height of the device frame to make this work.
To add a fixed footer or header to the FlowComponent, you can use the
This will anchor them to the top or bottom of your device screen, even when transitioning to the next screen.
# Set a fixed navigation bar (on top)flow.header = flowBar# Set a fixed tab bar (on bottom)flow.footer = tabBar
Check out the example below to see how an artboard from Design automatically becomes scrollable, along with a fixed header and footer.
You’re probably familiar with the smooth scrolling on iOS. Getting this to feel just right involves a lot of physics. The ScrollComponent in Framer takes care of this for you, while remaining completely customizable.
A ScrollComponent is built with two layers. First, the ScrollComponent itself, which serves as a masking layer.
Second, the content layer, which has
draggable enabled and pre-defined constraints. The size of the content layer is calculated for you, based on the size of its children.
# Create a ScrollComponentscroll = new ScrollComponentsize: 120# Assign the content layerslayerA.parent = scroll.contentlayerB.parent = scroll.content
Similar to draggable layers, you can also restrict the scrolling direction.
scroll.scrollHorizontal = truescroll.scrollVertical = false
A great way to bring your static designs to life in Framer is by using scrolling. To add scrolling behavior to layers, you can wrap them in a ScrollComponent, using
# Wrap the content layersscroll = ScrollComponent.wrap(content)
To add some extra spacing to your content, you can use the
contentInset property. This is useful to place content within a scrollable area. Think of a header on top a list. You can’t scroll beyond the header, but you can scroll the feed. An example of this can be seen in Twitter for iOS.
# Create a ScrollComponentscroll = new ScrollComponentwidth: 120height: 120scrollHorizontal: false# Define the contentInsetscroll.contentInset =top: 40bottom: 40right: 0left: 0
The three fundamental scrolling events are:
Scroll (or ScrollMove) and
ScrollEnd. Within the Scroll event, the positions of the scrollable layer can be retrieved. For example, animations can be started based on the vertical scrolling distance with
# Create a ScrollComponentscroll = new ScrollComponentscrollHorizontal: false# Listen to the Scroll eventscroll.onScroll ->if scroll.scrollY < -10layerA.animatescale: 1
Just like with draggable layers, there are two specific events that occur when momentum and bounce are enabled:
ScrollAnimationDidEnd. They occur after ScrollEnd.
# After Scroll, the ScrollAnimation startsscroll.onScrollAnimationDidStart ->layer.animatewidth: 100# After the scroll animationscroll.onScrollAnimationDidEnd ->layer.animatewidth: 120
With the PageComponent, piecing together multiple static screens into a single, interactive prototype is a breeze. It handles all of the calculations, allowing you to focus on the experience.
The PageComponent allows you to easily swipe between layers, in any direction. It’s based on the ScrollComponent.
# Create a PageComponentpage = new PageComponent# Define first page layerlayerA.parent = page.content# Define second page layer place it to the rightlayerB.parent = page.contentlayerB.x = 200
New pages can be added by using
page.addPage(). This takes a layer, and places it on the right side. Pages can also be added on the bottom.
# Create a PageComponentpage = new PageComponent# Add layerA to the right# Add layerB to the bottompage.addPage(layerA)page.addPage(layerB, "bottom")
To add pagination behavior to designed layers, you can wrap them in a PageComponent, using
# Wrap the content layerpage = PageComponent.wrap(content)
Ordering and Sorting
Detecting a page-switch can be done with the
change:currentPage event. This is really useful when designing things like page indicators.
# Listen to any page switchpage.on "change:currentPage", ->page.previousPage.animateopacity: 0.2scale: 0.8page.currentPage.animateopacity: 1scale: 1
You don’t always want to start at the first page. You can also automatically snap to a page layer, with or without an animation.
# Snap to the layer pageThreepage.snapToPage(pageThree)# Snap with a custom animation curvepage.snapToPage(pageTwo, true, curve: Spring)
You can keep track of the index of your pages, measured either horizontally or vertically. The index is the page number, minus 1. This means the index will always start at 0 instead of 1. To highlight many of the mentioned properties and methods, have a look at this Page Indicator example.
page.on "change:currentPage", ->for layer in indicatorslayer.animateopacity: 0.5current = page.currentPagei = page.horizontalPageIndex(current)indicators[i].animateopacity: 1
Sliders can be used to show progress, change the volume, adjust photos, define a price range and more. With the SliderComponent, you can build adaptable designs without having to start from scratch.
The SliderComponent consists of 3 layers: the slider itself, the fill and the knob.
The slider is track of the slider. The knob is used to change the
value of the slider.
fill represents the current value.
You can change the appearance of these layers, just like any other layer.
The SliderComponent has a few unique properties:
- min (minimum value)
- max (maximum value)
- value (starting value)
- knobSize (width and height of the knob)
# Create Sliderslider = new SliderComponentmin: 0max: 100value: 50knobSize: 40# Customize fill colorslider.fill.backgroundColor = "#fff"
The slider itself is simply a Framer layer, meaning you can change all of its visual properties. Same thing goes for the fill and knob layers.
# Customize sliderslider.backgroundColor = "#DDD"# Customize fillslider.fill.backgroundColor = "#00AAFF"# Customize knobslider.knob.shadowY = 2
onValueChange function, you can detect value changes, and retrieve the current value as it’s being changed.
# Create Sliderslider = new SliderComponentmin: 0max: 100value: 50# Get the current valueslider.onValueChange ->print slider.value