github.com/bpxl-labs/GradientHelper

Gradient Helper Framer Module

The Gradient Helper module simplifies the process of applying gradients to Framer layers and even enables animated gradients.

<img src="https://cloud.githubusercontent.com/assets/935/24376320/13b7ea52-1301-11e7-99c0-35b8f327b982.gif" width="497" style="display: block; margin: auto" alt=“Gradient Helper preview" />

Installation

NPM Installation

$ 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:

gradient = require "Gradient"

API

Apply a gradient

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

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

layerA.style.background = gradient.radial("yellow", "red")
layerA.style.background = gradient.radialThreeColor("yellow", "red", "green")

Reshape a radial gradient

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

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)

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

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:

layerA = new gradient.Layer
	firstColor: <string> (hex or rgba or named color)
	secondColor: <string> (hex or rgba or named color)
	thirdColor: <string> (hex or rgba or named color)
	direction: <string> ("top" || "bottom" || "left" || "right") or <number> (in degrees)
	prefix: <string> (hyphens are added for you)
	spread: <number> (0 is no transition)
	offset: <number>

layerA = new gradient.RadialLayer
	firstColor: <string> (hex or rgba or named color)
	secondColor: <string> (hex or rgba or named color)
	thirdColor: <string> (hex or rgba or named color)
	prefix: <string> (hyphens are added for you)
	spread: <number> (0 is no transition)
	offset: <number>
	gradientOriginX: <number> (0 is left, 1 is right)
	gradientOriginY: <number> (0 is top, 1 is bottom)
	gradientScaleX: <number> (percentage, 1 is 100% scale)
	gradientScaleY: <number> (percentage, 1 is 100% scale)

Animating a gradient

layerA.animateGradient(<arguments>)

Arguments

firstColor: <string> (hex or rgba or named color)
secondColor: <string> (hex or rgba or named color)
thirdColor: <string> (hex or rgba or named color)
direction: <string> ("top" || "bottom" || "left" || "right") or <number> (in degrees)
spread: <number>
offset: <number>
time: <number>
curve: <string> ("linear" || "ease-in" || "ease-out" || "ease-in-out" )

Arguments for radial gradient animation

originX: <number> (0 is left, 1 is right)
originY: <number> (0 is top, 1 is bottom)
scaleX: <number> (percentage, 1 is 100% scale)
scaleY: <number> (percentage, 1 is 100% scale)

Examples

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

	layerA.on "gradientAnimationStart", ->
		print "animation start"

	layerA.on "gradientAnimationEnd", ->
		print "animation end"

---

Website: blackpixel.com  ·  GitHub: @bpxl-labs  ·  Twitter: @blackpixel  ·  Medium: @bpxl-craft