Hi there 🧜🏻‍♀️

Microinteraction

Agenda

 👩🏻‍🎤 Microintegration 🦸🏼‍♂️
   
 🔮 Magic ✨

What is that?

Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favourite or “like” something, you are engaging with a microinteraction. They are everywhere: in the devices we carry, the appliances in our house, the apps on our phones and desktops, even embedded in the environments we live and work in. Most appliances and some apps are built entirely around one microinteraction.”

Make user feel confident in your product

Make the content push other elements out of the way

Use buttons to show different states

Bring attention to something important

Let's talk about React

CSS transition
React - pose
React - motion

Animating children

Demo

D emo

React Motion

$ yarn add react-motion styled-components


$ npm install react-motion styled-components

const buttonStyle = {
  backgroundColor: 'transparent',
  color: 'white',
  border: '1px solid white',
  borderRadius: 4,
  height: 40,
  lineHeight: 2.5,
  paddingLeft: 16,
  paddingRight: 16,
  outline: 'none',
  cursor: 'pointer'
}

import { Motion, spring } from "react-motion";

<Motion
    style={{
        x: spring(panelOpen ? 0 : -100),
        opacity: spring(panelOpen ? 1 : 0)
          }}
        >{(currentStyles) => (
      <Div
        css={{
           ...panelStyle,
           transform: `translate3d(${currentStyles.x}%, 0, 0)`,
           opacity: currentStyles.opacity
          }}
        >

Demo

So many libraries and don't know what to choose

Concenrate in one!

croftyland

Hi there 🧜🏻‍♀️

Microinteraction

Agenda

What is that?

Make user feel confident in your product

Make the content push other elements out of the way

Use buttons to show different states

Bring attention to something important

Let's talk about React

CSS transition

React - pose

React - motion

Animating children

Demo

Demo

React Motion

Demo

So many libraries and don't know what to choose

Concenrate in one!

croftyland

D emo