☰
The Framer Classic book
The Framer Classic book
Introduction
FAQ
Why use Framer Classic?
What is Framer Classic?
About this book
Intro to Framer
Installation
A tour of the Framer Classic interface
Framer Design
First steps
Animation basics
Previewing your prototype
CoffeeScript
Introduction
Variables
Decision making
Functions
Arrays
Objects
Methods
Loops
More CoffeeScript
Layers
Types of layers
Image layers
Video layers
Dimensions
Position
Background color
Border radius
Border
Rotation
Filters and effects
Shadow
Opacity
Visibility
Layer hierarchy
Stacking order
Text Layers
Combining Design and Code
Setting and changing the text
Templating
Auto-sizing
Padding
Truncation
Color
Background Color
Font Size
Font Family
Font Weight
Font Style
Line Height
Font
Text Align
Shadow Color
Shadow X
Shadow Y
Shadow Blur
Letter Spacing
Word Spacing
Text Transform
Text Decoration
Text Indent
Direction
Setting other CSS properties
Using common layers for text
Animation
Three ways to animate
Using the animate() function
Time, Delay, Repeat and Looping
A layer’s animation options
Using the Animation object
Animation events
Animation curves
Animating colors
All animatable properties
States
Creating states
Switching between states
Cycling through states
Editing states
State change events
Special states
Listing all the states
Colors
Colors are objects
Lightening or darkening colors
Changing a color’s saturation
Mixing colors
Generating a random color
Gradients
Combined with Background color
Size of the gradient
More color stops
Animating gradients
Events
Basic use
Tap events
Native browser events
Pan events
Drag events
Swipe events
Multi-touch events
Accessing gesture event properties
Removing an event handler
Ignoring events
Animation events
State change events
Scroll events
Paging events
Image events
Transition events
Value change events
Change events
Draggable layers
Constraints
Overdrag, Momentum, and Bounce
Changing the speed
Automatic direction lock
Drag events
Pinchable layers
Changing the threshold
Scaling from the layer’s center
Tweaking the scaling behavior
Tweaking the rotation behavior
Multi-touch events
Scrolling
Basic use
Content inset
Quickly adding content
Changing the scroll behavior
Changing the scrolling speed
Wrapping
Scroll events
Paging
Basic use
Adding pages
Creating many pages
Making more pages visible
Adding space between pages
Setting the initial page
Wrapping
Paging events
Slider component
Customizing the slider
The knob
Creating a vertical slider
Minimum, maximum, and current value
Value change event
Setting the value of the slider
Knob position vs. slider value
Range slider
Customizing the slider
The knobs
Creating a vertical slider
Minimum, maximum, and current values
Value change events
Setting the values of the slider
Knob positions vs. slider values
Flow component
Difference from the other components
Basic use
Automatic scrolling
Headers and footers
Overlays
Current, Previous, and Stack
Custom transitions
Transition events
Tips and tricks
Utilities
Timing utilities
Math utilities
Utilities for arrays
Random value generators
Labeling layers
Adding custom CSS
Platform detection
More utilities
Global values
Background Layer
Screen size
Framer defaults
Device settings
Importing
How to import
Groups become layers
Child layers are directly accessible
How does importing work?
Tips for Sketch
Tip for Photoshop
IF by IFTTT
Container layer
A PageComponent to hold the pages
Page one: The iPhone
The icons around the iPhone
Animating the icons around the iPhone
Pages two and three: Instagram example recipe
Stop the Instagram example recipe from moving
Pages four and five
Page four: iPhone that moves up
Page four: Fading in the light trails and scaling them
Page four: Animating the app icons
Page five: Moving the iPhone off-screen and fading out the light trails
Animating the app icons between pages four and five
Page six
Page six: White button and Sign-in banner
Page indicators
Splash screen
Page six: Switching from ‘Create Account’ to ‘Sign in’ mode
Page six: Switching back to ‘Create Account’ mode
Page six: ‘Reset password’ mode
Hyperlapse
Video and audio in Framer
Structure
First video page: Bridge
Adding the ‘Swipe to continue’ coach mark
Second video page: Clouds
Third video page: Train
Fourth video page: People
Swiping between the video pages
Adding the page indicators
Splash screen
Spinning wheel animation
Presenting the videos
Make ‘Swipe to continue’ appear after 10 seconds
Adding the music
Mixing the music tracks
Animating the page indicators
Final touch
Apple Music
Introduction
Importing the Sketch file
Making the “Library” screen scrollable
Making only the first tab active
Making the “For You” screen scrollable
Placing the Status Bar and Tab Bar on top of everything
Making the “Recently Played” albums scrollable
A Page Component for the “New Music Mix,” “Favourites Mix,” and “Chill Mix” cards
Showing parts of the other cards
Making today’s date dynamic
Switching between the Tabs
The “Now Playing” screen
Transparent gray overlay behind the “Now Playing” screen
Playing music with the Framer Audio module
Animating the album cover
Recreating the progress bar and timers
Recreating the volume slider
Drawing the mini-player in Framer Design
Tweaking the mini-player in Code
Small version of the album cover on the mini-player
Transitioning from the “Now Playing” screen to the mini-player
Transitioning from the mini-player back to “Now Playing”
Text Layers
Combining Design and Code
Setting and changing the text
Templating
Auto-sizing
Padding
Truncation
Color
Background Color
Font Size
Font Family
Font Weight
Font Style
Line Height
Font
Text Align
Shadow Color
Shadow X
Shadow Y
Shadow Blur
Letter Spacing
Word Spacing
Text Transform
Text Decoration
Text Indent
Direction
Setting other CSS properties
Using common layers for text
Stacking order
Combining Design and Code