zehfernandes/framer-loadingplaceholder

Instantly creates Loading placeholder based on your layer style.

Loading Placeholder

Choreography and free of side effects.

See the demo

How to use it

Instalation

1. Download LoadingPlaceholder.coffee to your project's /modules directory
2. Add Placeholder = require 'LoadingPlaceholder' to the top of your code

Start

Apply to any layer you want to show a placeholder.

Placeholder = require 'LoadingPlaceholder'

YOURLAYER.placeholder()

You can set the placeholder to the parent layer and specify the depth property to replace just the children layers. For example:

CardHeader = new Layer
  name: "Card Header"

avatar = new Layer
  name: "Avatar"
  parent: CardHeader

name = new Layer
  name: "Name"
  parent: CardHeader

CardHeader.placeholder
    depth: 1

In that example the Layers avatar and name recive a placeholder.

Load the content

To show the content and trigger the entrance animation use the method loaded():

# You can trigger the animation to a particular layer
YOURLAYER.loaded()

# Or to all descendants layers that have a placeholder
CardHeader.loaded()

Another method is the shortcut loadedall(). It will search for all placeholder layers in current stage

Placeholder = require 'LoadingPlaceholder'
placeholder.loadedAll()

Overwrite default elements

If you want overwrite the deafult Placeholder Element or the Default Animation you can use this methods:

Placeholder = require 'LoadingPlaceholder'

# Just for the specific layer
YOURLAYER.placeholder
    customElement: [function]
    customAnimation: [function]

# Apply global to all the placeholders
Placeholder.defaultElement = [function]
Placeholder.defaultAnimation = [function]

Overwrite using this follow functions:

# Element
customPlaceholder = (layer) ->
  newPlaceholder = new Layer
    width: layer.width # var layer is the reference to your content layer
    height: layer.height

  return newPlaceholder

# Animation
custonAnimation = (layer, placeholder, delay) ->
  # Rewrite the states:
  # layer.states.placeholderIn
  # layer.states.placeholderOut
  # placeholder.states.placeholderOut