cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              html
  head
    script(src='https://code.jquery.com/jquery-2.1.1.min.js')
    script(src='https://code.famo.us/lib/functionPrototypeBind.js')
    script(src='https://code.famo.us/lib/classList.js')
    script(src='https://code.famo.us/lib/requestAnimationFrame.js')
    link(rel='stylesheet', href='https://code.famo.us/famous/0.3/famous.css')
    script(src='https://code.famo.us/famous/0.3/famous-global.min.js')
    meta(name='viewport', content='width=device-width, maximum-scale=1, user-scalable=no')
    meta(name='apple-mobile-web-app-capable', content='yes')
    meta(name='apple-mobile-web-app-status-bar-style', content='black')
    meta(name='apple-mobile-web-app-capable', content='yes')
    meta(name='mobile-web-app-capable', content='yes')
 body
            
          
!
            
              @import "nib"

body
  background-color #4B4A4A
  font-family sans-serif
  font-weight bold
  text-align center
  color white

shadow = 0 3px 10px black

.surf
  line-height 100px
  border-radius 5px
  text-shadow shadow
  box-shadow shadow

            
          
!
            
              View = famous.core.View
Entity = famous.core.Entity
Modifier = famous.core.Modifier
Transform = famous.core.Transform
Transitionable = famous.transitions.Transitionable
TransitionableTransform = famous.transitions.TransitionableTransform
Easing = famous.transitions.Easing

class FlexGrid extends View
  @DEFAULT_OPTIONS:
    marginTop: 10
    marginSide: 0
    gutterCol: 10
    gutterRow: 10
    itemSize: [300, 150]
    transition:
      duration: 300
      curve: Easing.outBack

  constructor: (@options)->
    super @options
    @_modifiers = []
    @_states = []
    @_height = 0
    @id = Entity.register @

  _calcSpacing: (width) ->
    itemWidth = @options.itemSize[0]
    gutterCol = @options.gutterCol
    ySpacing = itemWidth + gutterCol
    margin = @options.marginSide
    numCols = Math.floor (width - 2 * margin + gutterCol) / ySpacing
    margin = (width - numCols * ySpacing + gutterCol) / 2
    {
      numCols: numCols
      marginSide: margin
      ySpacing: ySpacing
    }

  _calcPositions: (spacing) ->
    positions = []
    col = row = 0
    for item in @_items
      xPos = spacing.marginSide + col * spacing.ySpacing
      yPos = @options.marginTop + row * (@options.itemSize[1] + 
      	@options.gutterRow)
      positions.push [xPos, yPos, 0]
      col++
      if col is spacing.numCols
        row++
        col = 0
    @_height = yPos + @options.itemSize[1] + @options.marginTop
    positions

  _createModifier: (index, position, size) ->
    transitionItem = {
      transform: (new TransitionableTransform(Transform.translate.apply(null, position)))
    , size: (new Transitionable(size or @options.itemSize))
    }
                 
    modifier = new Modifier transitionItem
    @_states[index] = transitionItem
    @_modifiers[index] = modifier

  _animateModifier: (index, position, size) ->
    transformTransitionable = @_states[index].transform
    sizeTransitionable = @_states[index].size
    transformTransitionable.halt()
    sizeTransitionable.halt()
    transformTransitionable.setTranslate position, @options.transition
    sizeTransitionable.set size, @options.transition

  sequenceFrom: (items) -> @_items = items
    
  render: -> @id

  getSize: ->
    return unless @_height
    [@_cachedWidth, @_height]

  commit: (context) ->
    width = context.size[0]
    specs = []
    unless @_cachedWidth is width and @_cachedLength is @_items.length
      spacing = @_calcSpacing width
      size = @options.itemSize
      if spacing.numCols < 2
        spacing.numCols = 1
        spacing.marginSide = 0
        size = [width, size[1]]
      positions = @_calcPositions spacing
      for i in [0...@_items.length]
        if @_modifiers[i] is undefined
          @_createModifier i, positions[i], size
        else
          @_animateModifier i, positions[i], size
      @_cachedWidth = width
    for i in [0...this._modifiers.length]
      spec = @_modifiers[i].modify target: @_items[i].render()
      specs.push spec
    specs

$ ->
  Engine = famous.core.Engine
  Scrollview = famous.views.Scrollview
  Surface = famous.core.Surface

  NUM_SURFACES = 50

  famous.polyfills
  famous.core.famous

  mainCtx = Engine.createContext()

  flexGrid = new FlexGrid

  scrollview = new Scrollview size=[undefined, true]
  Engine.pipe scrollview

  mainCtx.add scrollview
  scrollview.sequenceFrom [flexGrid]
  
  surfaces = []
  for i in [1..NUM_SURFACES]
    surface = new Surface
      classes: ['surf']
      content: "<div style='height: 100%; width: 100%;'><p>Surface #{i}</p></div>"
      properties:
        backgroundColor: "hsl(#{i * 360 / NUM_SURFACES}, 60%, 40%)"
    surfaces.push surface
  flexGrid.sequenceFrom surfaces

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console