Introduction to Classes in FramerJS and Material Ripple Effect

Classes are objects that are can be extended to add desired behavior or properties to it. For example, all components in Framer Studio are classes that are an extension of the Layer class. We can call all these components sub-classes.

In layman’s language, you can create a component using class (ex: a button)and use it again and again whenever you need a button in your prototype instead of creating a new button every time and writing the same code for every button.

Lets take an example: Layer Class

button = new Layer

When we write the above code in Framer Studio, we create a new layer. The name of the created layer is called “button”.

Framer has a class called Layer. When we add the keyword “new” with the class name, a instance of Layer is created.

Lets create a class of our own which would extend all the properties of Layer class and also add few special properties of our own to it like the ability to create a ripple whenever an instance of it is tapped or clicked and the ability to stylize it.

Lets check out the code below.

To create a class we start by writing “class YOUR_CLASS_NAME extends Layer”. In the code above we have named the class Container. As a thumb rule we would use camelcase when we name a class, i.e, we would start the name with a capital letter. This would help us distinguish between a class and its instances. For example:

container = new Container

Container with upper case C is the class and container with lower case c is the instance.

The first line means that the class Container extends all the properties of a Layer Class that is defined inside Framer Studio.

The constructor function is a special function in which we put all the initial properties of the layer we want to have when an instance of the class is created.

“options = {}” acts as a clipboard and we can assign all our special and custom features to it.

super(options) wraps all the properties we have defined inside the function and appends the custom features to the Layer class.

You can create your own property like rippleColor which I have created above and add it to the clipboard options. (You can name the clipboard anything you like, instead of options, you can also name it features, etc)

options.rippleColor ?= “white”

options.rippleColor is assigned a value white but instead of assigning a value with equal to (=) sign, we have also used the question mark (?). This enables us to change the value of the property when you create an instance. That means when an instance is created, the initial value of the rippleColor is white but we can change it to say red if we want but if the question mark is not used then the value becomes permanent and cannot be changed when a new instance is created. For example:

button = new Container
  rippleColor: "red"

The above code will create an instance of class Container with rippleColor red instead of white which was its initial value. But if we would not have used the question mark, white would have been the color of the ripple even if assign red as its color.

Lets look at the properties that I have defined in the code above shown in the screenshot. We want a class that can act as a container to other elements and when clicked produce a ripple every time. The container size should be modifiable along with other properties like background color, ripple color, ripple size, ripple time and its x & y coordinates.

You can see I have added few custom properties that are not defined in the Layer class: rippleColor, rippleSize, rippleTime. Lets now see how to assign these variables to layers inside the Container class.

Lets create the ripple layer which is formed whenever the instance of the Container class is tapped or clicked. The ripple layer should be inside the constructor function and below super(options).

We have made the ripple layer a child of Container class by writing the code

parent: @

@ means “this” in short form. “this” means the class object itself and in our case Container class. Container class is a sub-class of Layer. So when an instance of Container is created, we have essentially created an instance of Layer class with added features.

We will now add special features to the ripple layer that we have assigned in the constructor function just before the super(options) code.

backgroundColor: options.rippleColor
size: options.rippleSize

Now lets create the interaction of the ripple. We do that by

@onClick (event) ->

@onClick means this.onClick, where this refers to the class object itself.

ripple.midX = event.offsetX
 ripple.midY = event.offsetY
 ripple.scale = 0
 ripple.opacity = 0.3
 ripple.animate
    scale: 3
    opacity: 0
    options:
      curve: "ease-out"
      time: options.rippleTime

ripple.midX is the center of the layer in the X axis and ripple.midY is the center of the layer in the Y axis. When we are saying ripple.midX & ripple.midY is equal to event.offsetX & event.offsetY, it checks the location of the click or tap and maps the center of ripple layer to the coordinates of the click or tap. Thus every time when I click/tap the ripple starts from that position. Last thing is to scale it to zero and make its opacity to 0.3. So that on click/tap we can scale it to 3 times its size and reduce its opacity to zero.

Now we have created our Container class. We can now create instances of the class.

Check the above code to see how we create a new instance of the class. You can see how we have used the unique properties like rippleSize, rippleColor used to define the ripple in the container.

Check out the prototype here to play with the code.

class&ripple