Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Creating a triangle via Framer Layer
# Project Info
# This info is presented in a widget when you share.
# http://framerjs.com/docs/#info.info
Framer.Info =
title: "Triangle Layer Rebound"
author: "Jordan Dobson"
twitter: "jordandobson"
description: "jordandobson@gmail.com\n\nThis rebound of jrdn.io/haJ2 \nby Black Ray adds direction checking, allows you to set direction as an option when creating a layer and sets the bounding box of the layer to it's intrinsic size."
# Attempt to define triangle on Layer if it hasn't been set yet
try Layer.define "triangle",
get: -> @_properties["triangle"]
set: (direction) ->
edge = top: "top", bottom: "bottom", left: "left", right: "right"
return print 'Please use a valid argument for triangle "top", "bottom", "left" or "right"' unless edge[direction]?
oppositeEdge = (opposite) ->
return switch opposite
when edge.left then edge.right
when edge.right then edge.left
when edge.top then edge.bottom
when edge.bottom then edge.top
@.borderColor = @.backgroundColor = ""
@.borderWidth = @.height = @.width / 2 if direction is edge.top or direction is edge.bottom
@.borderWidth = @.width = @.height / 2 if direction is edge.left or direction is edge.right
@.style =
"border-#{direction}-color" : @.color
"border-#{oppositeEdge direction }": "none"
@_properties["triangle"] = direction
# Create triangles
triangleLeft = new Layer size: 100, color: "#3D1C00", triangle: "left"
triangleTop = new Layer size: 100, color: "#86B8B1", triangle: "top"
triangleBottom = new Layer size: 100, color: "#FA2A00", triangle: "bottom"
triangleRight = new Layer size: 100, color: "#F2D694", triangle: "right"
# Position the triangles
for t in [triangleLeft, triangleRight, triangleTop, triangleBottom]
t.point = Align.center
t.x -= t.width/2 if t is triangleLeft
t.x += t.width/2 if t is triangleRight
t.y -= t.height/2 if t is triangleTop
t.y += t.height/2 if t is triangleBottom
# t.shadowSpread = 1 # enable this to see the bounding box
print t.triangle
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment