This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Giles Perry
Posted Oct 04 - Read on Facebook

Hey Framers,

I’ve been trying to figure out how to create a custom layer class. I’ve written code to extend the layer class to create an svg ring.

The ring has the following properties:
outerRadius, innerRadius, color

I want to define default values if these are not set.

The background color should always be transparent, and the height and width of the layer should always equal twice the outer radius of the ring.

It’s more or less working, but there are a lot of things that I don’t really understand.

1. In the constructor, I’m trying to define the default values.

@options.color ?= "rgba(123,123,123,0.5)" works fine, but similar code for outerRadius and innerRadius only work when I add @define statements.

2. My code uses @options={} and @options.outerRadius in the constructor.

I’ve seen an example that leaves out the @ symbol in both cases. My code does not work without it? Is it needed because of the use of "?=".

3. I don’t really understand when I need to use @options.outerRadius and when I can use @.outerRadius to refer to or change this value. e.g. Line 21 seems to work fine:
@.width = @.height = @.outerRadius*2

4. I want the default for innerRadius = outerRadius / 2 so, in the constructor I’ve written
@options.innerRadius ?= @options.outerRadius/2
This seems to work in Framer Studio, but the share.framerjs.com version seems to ignore this.

Any advice, suggested corrections or pointers to tutorials or documentation on this stuff would be greatly appreciated.

http://share.framerjs.com/8a4hibtvagu7/

6 Comments

Koen Bok

Without getting into your specific q (I'm on the move), I think you can learn a lot from our built in circular progress component: https://github.com/koenbok/Framer/blob/master/framer/Components/CircularProgressComponent.coffee

Giles Perry

Think I've answered one of my questions: all custom properties must be defined. In my example above, the color property worked because layers already have a color property for text color.

Giles Perry

Still confused about the difference between @outerRadius and @options.outerRadius, and when to use one over the other? Sometimes they appear interchangeable.

Giles Perry

I've gone ahead and taken it to the next level. http://share.framerjs.com/d3emrqfycr9k/
Trying to make the ring class work so I can animate the SVG. Not quite working though. Changes to the SVG don't seem to happing during the animation? Any ideas?

Dan Bartley

Was this line:
@width = @height = @outerRadius*2

Meant to be:
@width = @height = @outerRadius/2

*edit: The first instance of that line, not the second...

Giles Perry

I'm so close now! http://share.framerjs.com/1alsujy1m3fa/
I'm resetting the html from scratch whenever the radius values change. There are still two problems:

1. I'm doing something wrong with the scope of the layer properties. If I create two instances. When I animate one, both are updated.

2. I can't seem it access the x and y properties of the layer inside the class @x returns Nan?

Read the entire post on Facebook