DEV Community

Cover image for Pinterest like button interaction animation using  React + Framer motion
yadprab
yadprab

Posted on

Pinterest like button interaction animation using React + Framer motion

Live site

Repo

When I noticed this UI button interaction, I was like

interaction example plus reaction gif

  • set up a react project
npx create-react-app
Enter fullscreen mode Exit fullscreen mode
  • Add framer-motion
 npm install framer-motion  
Enter fullscreen mode Exit fullscreen mode

Now everything is ready.

This is how we're going to achieve this effect...!

Project structure

HTML STRUCTURE

Create the main component, and add the button wrapper and button elements.

HTML STRUCTURE

main component

Now add the main component and styles to our App component.

App component

Add some default styles to our Project

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');


:root {
    --bg: hsla(330, 6%, 12%, 1);
    --button: hsla(160, 27%, 98%, 1);
    --buttonText: hsla(330, 8%, 20%, 1);
    --notSelected: hsla(330, 6%, 46%, 1);




}

html {

    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    min-width: 100%;
    overflow-x: hidden;
    font-size: 100%;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;



}

*::after,
*::before {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    display: block;
    overflow: hidden;
}

a {
    text-decoration: none;
}

svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

body {
    background-color: var(--bg);

    font-family: 'Inter',
        sans-serif;
    font-weight: 400;
    line-height: 1.75;
    position: relative;
    transition: background 0.4s ease-in-out;
}

Enter fullscreen mode Exit fullscreen mode

Fun part

this is where fun beigns gif

Create a Separate component for our animation(span element)

Animation component

Now import motion from framer motion add it to our span element and add a layoutId button(will explain about this later).

added motion

Setting up a state using useState hook

state

Now add motion to our both buttons and wrap both buttons by Animateshared layout from framer motion.

  1. Based on the state, we're going to add a class to our button element active and non-active class.

  2. Based on the state, we're going to render the Anicomp.

  3. Now add the Onclick event to both buttons and set the button state regarding each button.

based on state we add calss and render componentbased on state we add calss and render component

Button styles

 button {
            appearance: none;
            border: none;
            background-color: unset;
            font-size: 1rem;
            letter-spacing: 4px;
            padding: 1.125em 1.5em;
            position: relative;
            border-radius: 50px;
            cursor: pointer;
  }


//  active and non active classes
        .active {
            color: var(--buttonText);
        }

        .notActive {
            color: var(--notSelected);
        }

 //span element styles
    .button--bg {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        right: 0;
        background: var(--button);
        display: block;
        width: 100%;
        height: 100%;
        z-index: -1;
        border-radius: 50px;
    }

Enter fullscreen mode Exit fullscreen mode

Final Output

Animation

AnimateShared Layout

Animateshared layout changes across, and between, multiple components. with help of the same layout id, framer motion shares the transition across the components.

More about AnimateShared layout and Layout animations using framer motion.

Layout animations indepth

AnimateShared Layout indepth

Discussion (0)