Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zehfernandes/framer-loadingplaceholder
Instantly creates Loading placeholder based on your layer style.
https://github.com/zehfernandes/framer-loadingplaceholder
framer loading-animations placeholder
Last synced: 3 months ago
JSON representation
Instantly creates Loading placeholder based on your layer style.
- Host: GitHub
- URL: https://github.com/zehfernandes/framer-loadingplaceholder
- Owner: zehfernandes
- Created: 2017-04-20T20:29:09.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-02-12T16:08:11.000Z (almost 5 years ago)
- Last Synced: 2024-08-04T00:10:24.658Z (6 months ago)
- Topics: framer, loading-animations, placeholder
- Language: CoffeeScript
- Homepage: https://framer.cloud/NApWd/
- Size: 1.62 MB
- Stars: 16
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-framer - Loading Placeholder - Module which instantly creates loading placeholder based on your layer style. (Modules)
README
# Loading Placeholder
Choreography and free of side effects.
[See the demo](https://framer.cloud/NApWd/)
## 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.
```coffee
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:
```coffee
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()`:
```coffee
# 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
```coffee
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:
```coffee
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:
```coffee
# 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
```