Floating Action Button with Gooey effect tutorial in FramerJS

The aim of this tutorial is to do something like the gif shown below, learn gooey effect and in the process learn about using functions in our prototypes.

To create this effect, create a new artboard first. For this tutorial, I chose iphone 7 artboard. You can choose any one you like.

Create a rectangle which is equal to the dimension of the artboard. Give it a white color. Right click and select “create target”. Now name it “bg”.

Create 4 circles of black color. 3 circles of equal size of 60px diameter and one big circle of 100px diameter. Right click on each small circles and choose “Create target”name them circ1, circ2, circ3 respectively.

Select these 3 circles in the layer menu in the left hand panel. Drag and drop them on the circ layer. This will make them children of circ layer. After creation of all the layers, your layer menu panel should look like the image below.

Choose all the circle layers and align them vertically and horizontally center.

Now lets switch to the code window. The short cut to switch to code window is by pressing command(⌘) + 2. To switch back to the design window press command(⌘) + 1.

To apply Gooey effect is very easy. The parent layer should have a very high contrast and children layer should have a blur property added to it.

So lets add a contrast property to our bg layer.

bg.contrast = 4000

Now lets give all the children layer of bg a blur property. To do that lets apply for loop to access all the children layer.

for circle, index in bg.children
 circle.blur = 20

The above code will assign a blur property to all the children layers of bg.

Lets create a function that when run will move the circles upwards and back to its position.

A function is a small spinet of code which can be reused again and again. For example, if we write a function to change the background color of layers, then this function can be used to change background color of any layer in the prototype. Thus instead of writing a block of code for each layer which would change its background color, the function can be called to change it, thus saving time and making the whole code succinct.

The syntax for writting a function is :

The “layer” in someFunction is a parameter of the function. When the fucntion is called, the parameter effects the output of the function. The parameter can be a “value” or even can be a “layer” in the prototype or can be “anything”.

Lets create a function called onClick. This function has 3 parameters. First parameter is the name of the layer which when clicked will invoke the gooey effect. Second parameter is the name of the layer which will move up from behind the Floating Action Button (FAB). And lastly the 3rd parameter, that is the distance to which the circles should go up from the main big circle.

onClick = (layerToClick, layer, distance) ->
 layer.states = 
  move: 
   y: distance
  returnBack: 
   y: 20
   
 layer.states.animationOptions = time: 0.5
 
 layerToClick.onTap ->
  layer.stateCycle(["move", "returnBack"])

The above code has a function called onClick, which takes in 3 parameters as described above. The layerToClick would be the circ layer which is out FAB. The layer would be circ1, circ2, circ3 layers. The distance parameter is the distance to which the smaller circles would move up.

2 states are defined for layer inside the function onClick. First state moves y up by a distance of distance and comes down to 20px. Since circ1, circ2, circ3 are children of circ layer, these measurements are relative to the position of circ layer.

Finally, when layerToClick is tapped, the states for layer would switch to the different states each time.

Now lets call the function onClick and assign the layers we have created in the design window. For distance, I found out that 90px is the best distance for moving upwards. Since the small circles are moving opposite to the position of their parent circle relatively, a negative sign is used.

onClick(circ, circ1, -90)
onClick(circ, circ2, -90*2)
onClick(circ, circ3, -90*3)

Check out the Framer prototype below:

gooey_fab

Check out the next Framer tutorial:

Introduction to Classes in FramerJS and Material Ripple Effect