Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gohypergiant/GradientHelper
A Framer module for applying gradients to layers and animating them.
https://github.com/gohypergiant/GradientHelper
Last synced: about 2 months ago
JSON representation
A Framer module for applying gradients to layers and animating them.
- Host: GitHub
- URL: https://github.com/gohypergiant/GradientHelper
- Owner: gohypergiant
- License: mit
- Created: 2017-03-27T14:36:29.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-13T21:39:27.000Z (over 7 years ago)
- Last Synced: 2024-11-01T07:02:24.354Z (2 months ago)
- Language: CoffeeScript
- Homepage:
- Size: 13.7 KB
- Stars: 21
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-framer - GradientHelper - Module that simplifies the process of applying gradients to Framer layers and even enables animated gradients. (Modules)
README
# Gradient Helper Framer Module
[](https://opensource.org/licenses/MIT)
[](.github/CONTRIBUTING.md)
[]()
**Note: On July 5th, 2017, Framer added native support for rendering and animating gradients. This module will no longer be maintained.**
The Gradient Helper module simplifies the process of applying gradients to Framer layers and even enables animated gradients.
### Installation
#### NPM Installation
```javascript
$ cd /your/framer/project
$ npm i @blackpixel/framer-gradienthelper
```
#### Manual installation
Copy or save the `Gradient.coffee` file into your project's `modules` folder.
### Adding It to Your Project
In your Framer project, add the following:
```javascript
gradient = require "Gradient"
```
### API
#### Apply a gradient
```coffeescript
layerA.style.background = gradient.top("yellow", "red")
layerA.style.background = gradient.bottom("yellow", "red")
layerA.style.background = gradient.left("yellow", "red")
layerA.style.background = gradient.right("yellow", "red")
layerA.style.background = gradient.angle("yellow", "red", -60)
```
#### Three-color gradient syntax
```coffeescript
layerA.style.background = gradient.topThreeColor("yellow", "red", "green")
layerA.style.background = gradient.bottomThreeColor("yellow", "red", "green")
layerA.style.background = gradient.leftThreeColor("yellow", "red", "green")
layerA.style.background = gradient.rightThreeColor("yellow", "red", "green")
layerA.style.background = gradient.angleThreeColor("yellow", "red", "green", -60)
```
#### Radial gradients
```coffeescript
layerA.style.background = gradient.radial("yellow", "red")
layerA.style.background = gradient.radialThreeColor("yellow", "red", "green")
```
#### Reshape a radial gradient
```coffeescript
layerA.style.background = gradient.radial("yellow", "red", originX: 0.5, originY: 0, scaleX: 2, scaleY: 1)
```
`originX`, `originY`, `scaleX`, and `scaleY` are percentages. An `originX`,`originY` of 0,0 centers the gradient in the upper left, while 1,1 centers it in the lower right. 0.5,0.5 is the default center.
#### Optionally set the gradient's spread
```coffeescript
layerA.style.background = gradient.top("yellow", "red", spread: 0.5)
# 1 is default, 0 is no transition between colors
```
#### Optionally set the gradient's offset (linear gradients only)
```coffeescript
layerA.style.background = gradient.top("yellow", "red", offset: 10)
# 0 is no offset, 100 will push the gradient out of view
```
#### Optionally change the CSS prefix
```coffeescript
layerA.style.background = gradient.top("yellow", "red", prefix: "moz")
# webkit is default, hyphens are added for you
```
### Gradient Layers
While a gradient can be applied to any existing layer, for convenience it is possible to create two types of gradient layers. If you wish to animate a gradient, you must use one of these classes:
```coffeescript
layerA = new gradient.Layer
firstColor: (hex or rgba or named color)
secondColor: (hex or rgba or named color)
thirdColor: (hex or rgba or named color)
direction: ("top" || "bottom" || "left" || "right") or (in degrees)
prefix: (hyphens are added for you)
spread: (0 is no transition)
offset:
layerA = new gradient.RadialLayer
firstColor: (hex or rgba or named color)
secondColor: (hex or rgba or named color)
thirdColor: (hex or rgba or named color)
prefix: (hyphens are added for you)
spread: (0 is no transition)
offset:
gradientOriginX: (0 is left, 1 is right)
gradientOriginY: (0 is top, 1 is bottom)
gradientScaleX: (percentage, 1 is 100% scale)
gradientScaleY: (percentage, 1 is 100% scale)
```
#### Animating a gradient
```coffeescript
layerA.animateGradient()
```
#### Arguments
```coffeescript
firstColor: (hex or rgba or named color)
secondColor: (hex or rgba or named color)
thirdColor: (hex or rgba or named color)
direction: ("top" || "bottom" || "left" || "right") or (in degrees)
spread:
offset:
time:
curve: ("linear" || "ease-in" || "ease-out" || "ease-in-out" )
```
#### Arguments for radial gradient animation
```coffeescript
originX: (0 is left, 1 is right)
originY: (0 is top, 1 is bottom)
scaleX: (percentage, 1 is 100% scale)
scaleY: (percentage, 1 is 100% scale)
```
#### Examples
```coffeescript
layerA.animateGradient(direction: -60, spread: 2, offset: 0, time: 2)
layerA.animateGradient(offset: -50, curve: "ease-in-out")
layerA.animateGradient(secondColor: "blue", spread: 0.5, scaleX: 2, originY: 1)
```
#### Detect animation start and end
```coffeescript
layerA.on "gradientAnimationStart", ->
print "animation start"
layerA.on "gradientAnimationEnd", ->
print "animation end"
```
---
Website: [blackpixel.com](https://blackpixel.com) ·
GitHub: [@bpxl-labs](https://github.com/bpxl-labs/) ·
Twitter: [@blackpixel](https://twitter.com/blackpixel) ·
Medium: [@bpxl-craft](https://medium.com/bpxl-craft)