🔪 Killer Interactions
#1
The Google Material
Button with Ripple Press Effect
First Interaction: 1.1 - Click-to-Grow-Circle
IN:
ELEMENT:
BUTTON
IF:
EVENT:
MOUSE-CLICK
START:
TIMED_ANIMATION:
[ 1.1 ] Click-&-Grow-Circle ]
Second Interaction: 1.2 - Anchor-to-Cursor-Position
IN:
ELEMENT:
BUTTON
IF:
EVENT:
MOUSE-MOVE_XY
KEEp-ACTIVE:
DYNAMIC_EFFECT:
[ 1.2 ] Anchor-To-Cursor-Position

Button with Ripple Press Effect

Google has nailed the Pressed State for buttons in their Google Material Design System, Why? Well, It's subtle for one but more importantly, it gives the right Affordance to what has just happened. After you click you know the click has worked, and in this interaction also adds the added benefit of letting the user know where exactly the click has taken place by creating a ripple effect which emanates away from the place where you have clicked.

1

Setup: Build The Button

The first thing we need to do is build our very own button from scratch. To do so we need to create a few layers. The reason why we are not using the button element is to make each step or stage very explicate in what element is doing, so we will be using layers as learning tools.

1.1 - Add Link Layer: (Used to capture trigger event)
- Go to the add element option of the most left-hand side of the window, or press the keyboard shortcut of (A).

- Go to the basic drop down and drag across a [ Link Block ] element

- Name the Layer, 001_BTN_LINK, why? So we know its where the hit area of the button will be, and also in Webflow holds the URL info in the elements settings panel (Shortcut: E )

- Give the link box a width of 156px and a height of 40px, why just because it's a normal size.

- Next, give the [ Link Element ] a positioning of [ Relative ]. Why so that the elements we place inside it. Anchor themselves to it, and not to the body, or next positioned element outside the flow of the page.

1.2 - Add The Mask layer (Hides all graphic info outside it [ Overflow: Hidden is checked ] )
- Go to the add element option of the most left-hand side of the window, or press the keyboard shortcut of (A).

- Go to the basic drop down and drag across a [ Div Block ] element

- For this element you have just create give it these settings:

- Name: 001_ANI_MASK

- Size: Width 100% and Height 100%

- Layout: Flex, Align and justify Center

Border: 8px radius

- Overflow: Hidden

The Description of [ Overflow: Hidden ]

1.3 - Add Animation Layer (Layer we will hold all animation elements)
Again create a new div element and add the below details:

Name: 001_ANI_FROM-CURSOR-POSITION

Size: Width 100% and Height 100%, Why so that this layer takes the dimensions of the previous link layer we created

Layout: Display Flex, Align Center and middle

Position: Absolute

Border: 8px radius

1.3.2 - Add Circle
We need to now add the circle graphic we will be animating. For this we need to create a new div.

- Name the Layer: 001_GFX_RIPPLES_01

- Set size: Width 40px Height 40px ( this will not matter too much as the animation will deal with the size)

- Give the div a circular gradient background.

1.4 - Add Buttons Background Layer

- Create new div element, and give it the below info.

- Name: 001_BTN_BACKGROUND

Size: Width 100% and Height 100%, Why so that this layer takes the dimensions of the previous link layer we created

- Border: 8px radius

1.5 - Add Button Text Layer

- Create new text element, and give it the below info.

- Name: 001_TXT_BTN

- Type

- Type Color

- Flex Child / Layout

2

Build First Interaction:  "Click-to-Grow-Circle"

We now need to build out the interaction that listens for a mouse click on the desired button and triggers a timed animation that grows and fades a circle. (this is without it being on the cursor this comes in the next interaction)

- Select the links layer, either on the page or in the left-hand side panel

- Add to its name at the extension [ ANI-1.1 ]

- Open select the interaction panel

- Create a new element trigger

- Select Mouse click (tap)

- Click in "on 1st Click"

- Then select an action > start an animation

- Then Select > Timed Animation

- Now we are going to add 6 events to the timeline

- First select the [ 001_GFX_RIPPLES_01 ] layer, ready to start animating

- Add 6 layers, the first two set as the initial state.

- Add a new setting to the timeline, from the timeline a + will appear, select for scale and set it to zero

- For the second interaction create a opacity setting of zero as well

- For the next two layers (3,4) again create one for Scale and one for Opacity.

- For Scale set at 9, this will place the animated circle just off the button (Delay at 0.2)

- For Opacity set at 100%, this will have the greatest impact which after will fade quickly onced clicked. (Delay at 0.3)

- For the next two layers (5,6) we are now going to reset the circle back to its original stats. 0 scale and 0 opacity

3

Build Second Interaction: "Anchor-To-Cursor-Position"

So now we are going to attach the previous interaction and animation to the cursor's position when it's inside the button.

- Select the links layer, either on the page or in the left-hand side panel

- Open select the interaction panel

- Create a new element trigger

- This time create a new trigger (+) press then plus

- a > Mouse move over element

- Select its action > Play Mouse Animation

- Call it [ 1.2 ] Follow_Cursor-Position

- Now select the layer we are going to animate which is the one which holds our previous interaction we made.

- Add the follow 4 settings to the layer which you must select for the animation

Bingo your click animation should be following your cursor once you click. Now the settings above are dynamic for height meaning any height button will work correctly, but if you change the width of your button, you will need to change the in the Y action the move value of X% to be half of your desired button either way.

Code Pen Version

Here Is a similar chunk of code, Which gets the same desired effect. I would even suggest it is a better version than the web-flow equivalent I have created. As it allows for the repeated clicking and the generation of new animations, which continue to overlap over each other. So if you're able to build on top of this attempt to recreate this result. Please do message me and I’ll update the web flow version.