Creating custom classes for FramerJS prototyping

app.coffee

class Pill extends Layer
	constructor: (options) ->
		super _.defaults options,
			height: 26
			width: 156
			borderRadius: 13
			color: 'white'
			html: 'Pill_name'
			style: 
				'font-size': '14px'
				'font-weight': 'bold'
				'padding': '0 8px 0 12px'
				'line-height': '26px'
		
		@type('string')
	
	type: (type) ->
		switch type
			when 'string'    then @.backgroundColor = '54C7EC'
			when 'number'    then @.backgroundColor = '6BCEBB'
			when 'unknown'   then @.backgroundColor = '90949C'
			when 'calcuated' then @.backgroundColor = '4B4F56'

pills = []

Utils.delay 2, ->
	for i in [1..10]
		offset = 4
		pillHeight = 26
		pill = new Pill
			x: Align.center(-50)
			opacity: 0
			y: 300 + (offset * i) + (pillHeight * i)
			animate:
				x: Align.center
				options:
					curve: 'spring(400, 40, 0)'
	
		pill.type(Utils.randomChoice [
			'string', 
			'number', 
			'unknown', 
			'calculated'
		])
		
		pills.push pill
    
	for layer, index in pills
		layer.animate
			delay: index * 0.05
			properties:
				x: Align.center
				opacity: 1
				options:
					curve: 'spring(400, 20, 0)'