Home/ Questions/Q 5945

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 60k
Asked: 2024-11-27T01:59:07+00:00

Pinterest like button interaction animation using React + Framer motion

  • 60k

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

animationframermotionreactwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,