DEV Community: yadprab

Pinterest like button interaction animation using React + Framer motion

yadprab — Tue, 05 Oct 2021 15:05:04 +0000

When I noticed this UI button interaction, I was like

set up a react project

npx create-react-app

Add framer-motion

 npm install framer-motion

Now everything is ready.

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

HTML STRUCTURE

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

Now add the main component and styles to our 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;
}

Fun part

Create a Separate component for our animation(span element)

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

Setting up a state using useState hook

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

Based on the state, we're going to add a class to our button element active and non-active class.
Based on the state, we're going to render the Anicomp.
Now add the Onclick event to both buttons and set the button state regarding each button.

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;
    }

Final Output

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

Introduction to figma auto-layout and how it help us to code easily. From design to code.

yadprab — Wed, 03 Mar 2021 06:13:58 +0000

Introduction to figma auto-layout and how it help us to code easily. From design to code.

with help of figma auto-layout we can understand the basics of UI and it reduce the stress while coding.

What are we going to design and code?

A simple sign up form lets start

1. setting up of our container

Select the text layer
After writing our text select the auto layout option

Now auto layout is added

properties of auto layout

Direction (flex-direction)
spacing between items
padding
positioning the items

now add the padding (top,bottom, left,right) of 24px and add fill to our container.
now copy the same text and change the direction and the copied text to (Create your account with easy
with less information)
Now our container is ready and add space between two text to 16px.

2. Setting up th Input container.

create a label for our input
Add auto layout to this label
Add a rectangle to our Frame2(label frame).
Add width and height to our rectangle and spacing is 10px and padding is 0px
Now change the direction
adjust the width of the rectangle(input) and make it as a component
Input component is ready. add the component instance to our container and copy it and change the label name.

Now group everything inside our container and space between our groups is 48px.

now change the style of input by changing the component.

Now submit button.

Add a text layer
Add a button label
- Add auto layout to this text layer paddding of 16px 24px (16, 24 in input)
- Align to center direction corner radius of 50px
- Add Fill and change the colour
- Add a button to our main container.

3. Design is ready and Design to code.

add little adjustment to our container add padding-bottom :48px

destructuring from our design

HTML structure

container
component-1 component-2
component-3

CSS

with basics styles, we can code our form.
centre our container
adding styles to our container the padding from auto layout and using grid we're aligning our components in a single Column

now adding styles and spacing to our component-2

Final out button styles

our form is ready

codepen

# Create Card Components using css grids

yadprab — Fri, 12 Feb 2021 10:24:13 +0000

Hi! with CSS grid we can easily create a card component in few lines of code and its responsive to let's check it out

HTML structure

This is our main container. inside our main container, we have a card container
our HTML is ready now we copy and paste this card container for two more times.

Here is the Fun part (CSS)

Give basic and default stylings(i used SCSS here).after that
in our main container, we give display: grid;to our main container and specifiying column witdh and count grid-template-columns: repeat(auto-fit,300px); with row and column gap ofgap:1rem

grid-template-columns

gtc determines the column width for each child of the grid parent. the repeat function repeats the size for each number of columns. I know what you're thinking what is auto-fit? I will explain this later. now we style our cards

Cards styling

I applied few styles to our cards. now we will look our result

RESULT

Magic... Our card components are ready no more coding. ok now we will learn about autofit

Auto fit

Auto-fit takes up the as much as the width that available in the grid. I will explain this with an example. for this now we change auto-fit to 3 columns and add a background for visualization

Three columns result

when we mention the number of columns it takes up the width according to the grid container size. now we change the viewport size.
so it is a fixed width. you can change the number columns according to the viewport in media queries

Now using auto-fit

If you want a responsive card component then use auto-fit.
Magic.. and additional there's an auto-fill too here difference between auto-fill and fit. auto-fit vs auto-fill

Controlling height using grid-auto-rows

Normally grid set a row height based on the content but sometimes content for each card may differ so we can control the height using grid-auto-rows. For clear explaination about auto-rows

codepen