• Framer Classic icon The Framer Classic book
    • The Framer Classic book
    • Introduction
      FAQWhy use Framer Classic?What is Framer Classic?About this book
    • Intro to Framer
      InstallationA tour of the Framer Classic interfaceFramer DesignFirst stepsAnimation basicsPreviewing your prototype
    • CoffeeScript
      IntroductionVariablesDecision makingFunctionsArraysObjectsMethodsLoopsMore CoffeeScript
    • Layers
      Types of layersImage layersVideo layersDimensionsPositionBackground colorBorder radiusBorderRotationFilters and effectsShadowOpacityVisibilityLayer hierarchyStacking order
    • Text Layers
      Combining Design and CodeSetting and changing the textTemplatingAuto-sizingPaddingTruncationColorBackground ColorFont SizeFont FamilyFont WeightFont StyleLine HeightFontText AlignShadow ColorShadow XShadow YShadow BlurLetter SpacingWord SpacingText TransformText DecorationText IndentDirectionSetting other CSS propertiesUsing common layers for text
    • Animation
      Three ways to animateUsing the animate() functionTime, Delay, Repeat and LoopingA layer’s animation optionsUsing the Animation objectAnimation eventsAnimation curvesAnimating colorsAll animatable properties
    • States
      Creating statesSwitching between statesCycling through statesEditing statesState change eventsSpecial statesListing all the states
    • Colors
      Colors are objectsLightening or darkening colorsChanging a color’s saturationMixing colorsGenerating a random color
    • Gradients
      Combined with Background colorSize of the gradientMore color stopsAnimating gradients
    • Events
      Basic useTap eventsNative browser eventsPan eventsDrag eventsSwipe eventsMulti-touch eventsAccessing gesture event propertiesRemoving an event handlerIgnoring eventsAnimation eventsState change eventsScroll eventsPaging eventsImage eventsTransition eventsValue change eventsChange events
    • Draggable layers
      ConstraintsOverdrag, Momentum, and BounceChanging the speedAutomatic direction lockDrag events
    • Pinchable layers
      Changing the thresholdScaling from the layer’s centerTweaking the scaling behaviorTweaking the rotation behaviorMulti-touch events
    • Scrolling
      Basic useContent insetQuickly adding contentChanging the scroll behaviorChanging the scrolling speedWrappingScroll events
    • Paging
      Basic useAdding pagesCreating many pagesMaking more pages visibleAdding space between pagesSetting the initial pageWrappingPaging events
    • Slider component
      Customizing the sliderThe knobCreating a vertical sliderMinimum, maximum, and current valueValue change eventSetting the value of the sliderKnob position vs. slider value
    • Range slider
      Customizing the sliderThe knobsCreating a vertical sliderMinimum, maximum, and current valuesValue change eventsSetting the values of the sliderKnob positions vs. slider values
    • Flow component
      Difference from the other componentsBasic useAutomatic scrollingHeaders and footersOverlaysCurrent, Previous, and StackCustom transitionsTransition eventsTips and tricks
    • Utilities
      Timing utilitiesMath utilitiesUtilities for arraysRandom value generatorsLabeling layersAdding custom CSSPlatform detectionMore utilities
    • Global values
      Background LayerScreen sizeFramer defaultsDevice settings
    • Importing
      How to importGroups become layersChild layers are directly accessibleHow does importing work?Tips for SketchTip for Photoshop
    • IF by IFTTT
      Container layerA PageComponent to hold the pagesPage one: The iPhoneThe icons around the iPhoneAnimating the icons around the iPhonePages two and three: Instagram example recipeStop the Instagram example recipe from movingPages four and fivePage four: iPhone that moves upPage four: Fading in the light trails and scaling themPage four: Animating the app iconsPage five: Moving the iPhone off-screen and fading out the light trailsAnimating the app icons between pages four and fivePage sixPage six: White button and Sign-in bannerPage indicatorsSplash screenPage six: Switching from ‘Create Account’ to ‘Sign in’ modePage six: Switching back to ‘Create Account’ modePage six: ‘Reset password’ mode
    • Hyperlapse
      Video and audio in FramerStructureFirst video page: BridgeAdding the ‘Swipe to continue’ coach markSecond video page: CloudsThird video page: TrainFourth video page: PeopleSwiping between the video pagesAdding the page indicatorsSplash screenSpinning wheel animationPresenting the videosMake ‘Swipe to continue’ appear after 10 secondsAdding the musicMixing the music tracksAnimating the page indicatorsFinal touch
    • Apple Music
      IntroductionImporting the Sketch fileMaking the “Library” screen scrollableMaking only the first tab activeMaking the “For You” screen scrollablePlacing the Status Bar and Tab Bar on top of everythingMaking the “Recently Played” albums scrollableA Page Component for the “New Music Mix,” “Favourites Mix,” and “Chill Mix” cardsShowing parts of the other cardsMaking today’s date dynamicSwitching between the TabsThe “Now Playing” screenTransparent gray overlay behind the “Now Playing” screenPlaying music with the Framer Audio moduleAnimating the album coverRecreating the progress bar and timersRecreating the volume sliderDrawing the mini-player in Framer DesignTweaking the mini-player in CodeSmall version of the album cover on the mini-playerTransitioning from the “Now Playing” screen to the mini-playerTransitioning from the mini-player back to “Now Playing”
Framer book logo

  • The Framer Classic book
    The Framer Classic book
  • Introduction
    Introduction FAQ Why use Framer Classic? What is Framer Classic? About this book
  • Intro to Framer
    Intro to Framer Installation A tour of the Framer Classic interface Framer Design First steps Animation basics Previewing your prototype
  • CoffeeScript
    CoffeeScript Introduction Variables Decision making Functions Arrays Objects Methods Loops More CoffeeScript
  • Layers
    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
    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
    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
    States Creating states Switching between states Cycling through states Editing states State change events Special states Listing all the states
  • Colors
    Colors Colors are objects Lightening or darkening colors Changing a color’s saturation Mixing colors Generating a random color
  • Gradients
    Gradients Combined with Background color Size of the gradient More color stops Animating gradients
  • Events
    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
    Draggable layers Constraints Overdrag, Momentum, and Bounce Changing the speed Automatic direction lock Drag events
  • Pinchable layers
    Pinchable layers Changing the threshold Scaling from the layer’s center Tweaking the scaling behavior Tweaking the rotation behavior Multi-touch events
  • Scrolling
    Scrolling Basic use Content inset Quickly adding content Changing the scroll behavior Changing the scrolling speed Wrapping Scroll events
  • Paging
    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
    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
    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
    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
    Utilities Timing utilities Math utilities Utilities for arrays Random value generators Labeling layers Adding custom CSS Platform detection More utilities
  • Global values
    Global values Background Layer Screen size Framer defaults Device settings
  • Importing
    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
    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
    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
    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”

Introduction

  • FAQ
  • Why use Framer Classic?
  • What is Framer Classic?
  • About this book

The Framer Classic book FAQ
Copyright © 2016-2022 Tes Mat.