Skip to content

Commit

Permalink
liked button design and animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Deepak8717
Deepak8717 committed Jul 20, 2022
1 parent 7dd4366 commit d19a516
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 355 deletions.
110 changes: 30 additions & 80 deletions src/common/components/Like/Like.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,90 +6,40 @@ const Like = ({ onLikeClick }) => {
const [liked, setLiked] = useState(false);
const isAuthenticated = useAuthenticated();

const likeClickHandler = (e) => {
if (onLikeClick) {
if (isAuthenticated) {
setLiked(e.target.checked);
}
onLikeClick();
}
// const likeClickHandler = (e) => {
// if (onLikeClick) {
// if (isAuthenticated) {
// setLiked(e.target.checked);
// }
// onLikeClick();
// }
// };
const clickHandler = () => {
setLiked(!liked);
};

return (
<div className='like-main'>
<div id='main-content'>
<div>
<input
onChange={likeClickHandler}
checked={liked}
type='checkbox'
id='checkbox'
<div className="like-container">
<div className="like-icon" onClick={clickHandler}>
<svg
viewBox="-4 -8 42 42"
className={`${liked ? "liked back" : "back"}`}
>
<path
d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"
stroke-width="5"
/>
<label for='checkbox'>
<svg
id='heart-svg'
viewBox='467 392 58 57'
xmlns='http:https://www.w3.org/2000/svg'
>
<g
id='Group'
fill='none'
fill-rule='evenodd'
transform='translate(467 392)'
>
<path
d='M29.144 20.773c-.063-.13-4.227-8.67-11.44-2.59C7.63 28.795 28.94 43.256 29.143 43.394c.204-.138 21.513-14.6 11.44-25.213-7.214-6.08-11.377 2.46-11.44 2.59z'
id='heart'
fill='#AAB8C2'
/>
<circle
id='main-circ'
fill='#E2264D'
opacity='0'
cx='29.5'
cy='29.5'
r='1.5'
/>

<g id='grp7' opacity='0' transform='translate(7 6)'>
<circle id='oval1' fill='#9CD8C3' cx='2' cy='6' r='2' />
<circle id='oval2' fill='#8CE8C3' cx='5' cy='2' r='2' />
</g>

<g id='grp6' opacity='0' transform='translate(0 28)'>
<circle id='oval1' fill='#CC8EF5' cx='2' cy='7' r='2' />
<circle id='oval2' fill='#91D2FA' cx='3' cy='2' r='2' />
</g>

<g id='grp3' opacity='0' transform='translate(52 28)'>
<circle id='oval2' fill='#9CD8C3' cx='2' cy='7' r='2' />
<circle id='oval1' fill='#8CE8C3' cx='4' cy='2' r='2' />
</g>

<g id='grp2' opacity='0' transform='translate(44 6)'>
<circle id='oval2' fill='#CC8EF5' cx='5' cy='6' r='2' />
<circle id='oval1' fill='#CC8EF5' cx='2' cy='2' r='2' />
</g>

<g id='grp5' opacity='0' transform='translate(14 50)'>
<circle id='oval1' fill='#91D2FA' cx='6' cy='5' r='2' />
<circle id='oval2' fill='#91D2FA' cx='2' cy='2' r='2' />
</g>

<g id='grp4' opacity='0' transform='translate(35 50)'>
<circle id='oval1' fill='#F48EA7' cx='6' cy='5' r='2' />
<circle id='oval2' fill='#F48EA7' cx='2' cy='2' r='2' />
</g>

<g id='grp1' opacity='0' transform='translate(24)'>
<circle id='oval1' fill='#9FC7FA' cx='2.5' cy='3' r='2' />
<circle id='oval2' fill='#9FC7FA' cx='7.5' cy='2' r='2' />
</g>
</g>
</svg>
</label>
</div>
</svg>
<svg
viewBox="-4 -8 42 42"
className={`${liked ? "liked front" : "front"}`}
>
<path
d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"
stroke-width="2"
/>
</svg>
</div>
<div className="like-count">10</div>
</div>
);
};
Expand Down
271 changes: 44 additions & 227 deletions src/common/components/Like/Like.scss
View file
Original file line number Diff line number Diff line change
@@ -1,233 +1,50 @@
.like-main {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: arial;
*,
*::before,
*::after {
box-sizing: border-box;
position: relative;
}

#main-content {
display: flex;
background: white;
align-items: center;
justify-content: center;
text-align: center;
}

svg {
.like-container {
width: 45px;
height: 30px;
cursor: pointer;
overflow: visible;
width: 40px;
#heart {
transform-origin: center;
animation: animateHeartOut 0.3s linear forwards;
}
#main-circ {
transform-origin: 29.5px 29.5px;
}
}

#checkbox {
display: none;
}

#checkbox:checked + label svg {
#heart {
transform: scale(0.2);
fill: #e2264d;
animation: animateHeart 0.3s linear forwards 0.25s;
}
#main-circ {
transition: all 2s;
animation: animateCircle 0.3s linear forwards;
opacity: 1;
}
#grp1 {
opacity: 1;
transition: 0.1s all 0.3s;
#oval1 {
transform: scale(0) translate(0, -30px);
transform-origin: 0 0 0;
transition: 0.5s transform 0.3s;
}
#oval2 {
transform: scale(0) translate(10px, -50px);
transform-origin: 0 0 0;
transition: 1.5s transform 0.3s;
}
}
#grp2 {
opacity: 1;
transition: 0.1s all 0.3s;
#oval1 {
transform: scale(0) translate(30px, -15px);
transform-origin: 0 0 0;
transition: 0.5s transform 0.3s;
}
#oval2 {
transform: scale(0) translate(60px, -15px);
transform-origin: 0 0 0;
transition: 1.5s transform 0.3s;
}
}
#grp3 {
opacity: 1;
transition: 0.1s all 0.3s;
#oval1 {
transform: scale(0) translate(30px, 0px);
transform-origin: 0 0 0;
transition: 0.5s transform 0.3s;
}
#oval2 {
transform: scale(0) translate(60px, 10px);
transform-origin: 0 0 0;
transition: 1.5s transform 0.3s;
}
}
#grp4 {
opacity: 1;
transition: 0.1s all 0.3s;
#oval1 {
transform: scale(0) translate(30px, 15px);
transform-origin: 0 0 0;
transition: 0.5s transform 0.3s;
}
#oval2 {
transform: scale(0) translate(40px, 50px);
transform-origin: 0 0 0;
transition: 1.5s transform 0.3s;
}
}
#grp5 {
opacity: 1;
transition: 0.1s all 0.3s;
#oval1 {
transform: scale(0) translate(-10px, 20px);
transform-origin: 0 0 0;
transition: 0.5s transform 0.3s;
}
#oval2 {
transform: scale(0) translate(-60px, 30px);
transform-origin: 0 0 0;
transition: 1.5s transform 0.3s;
}
}
#grp6 {
opacity: 1;
transition: 0.1s all 0.3s;
#oval1 {
transform: scale(0) translate(-30px, 0px);
transform-origin: 0 0 0;
transition: 0.5s transform 0.3s;
}
#oval2 {
transform: scale(0) translate(-60px, -5px);
transform-origin: 0 0 0;
transition: 1.5s transform 0.3s;
}
}
#grp7 {
opacity: 1;
transition: 0.1s all 0.3s;
#oval1 {
transform: scale(0) translate(-30px, -15px);
transform-origin: 0 0 0;
transition: 0.5s transform 0.3s;
}
#oval2 {
transform: scale(0) translate(-55px, -30px);
transform-origin: 0 0 0;
transition: 1.5s transform 0.3s;
display: flex;
justify-content: space-between;
.like-icon {
width: 25px;
height: 25px;
transition: transform 0.5s ease;
border-radius: 50%;
svg {
width: 25px;
position: absolute;
z-index: 10;
transition: background-color 0.2s ease, transform 0.2s ease,
opacity 0.4s ease;
path {
stroke: #646464;
stroke-width: 2px;
fill: none;
}
}
}
.like-count {
font-size: 14px;
line-height: 2;
}
.liked.front {
path {
fill: red;
stroke: none;
}
}
.liked.back {
opacity: 0;
transform: scale(1.6);
path {
fill: red;
stroke: none;
}
}
#grp2 {
opacity: 1;
transition: 0.1s opacity 0.3s;
}
#grp3 {
opacity: 1;
transition: 0.1s opacity 0.3s;
}
#grp4 {
opacity: 1;
transition: 0.1s opacity 0.3s;
}
#grp5 {
opacity: 1;
transition: 0.1s opacity 0.3s;
}
#grp6 {
opacity: 1;
transition: 0.1s opacity 0.3s;
}
#grp7 {
opacity: 1;
transition: 0.1s opacity 0.3s;
}
}

@keyframes animateCircle {
40% {
transform: scale(10);
opacity: 1;
fill: #dd4688;
}
55% {
transform: scale(11);
opacity: 1;
fill: #d46abf;
}
65% {
transform: scale(12);
opacity: 1;
fill: #cc8ef5;
}
75% {
transform: scale(13);
opacity: 1;
fill: transparent;
stroke: #cc8ef5;
stroke-width: 0.5;
}
85% {
transform: scale(17);
opacity: 1;
fill: transparent;
stroke: #cc8ef5;
stroke-width: 0.2;
}
95% {
transform: scale(18);
opacity: 1;
fill: transparent;
stroke: #cc8ef5;
stroke-width: 0.1;
}
100% {
transform: scale(19);
opacity: 1;
fill: transparent;
stroke: #cc8ef5;
stroke-width: 0;
}
}

@keyframes animateHeart {
0% {
transform: scale(0.2);
}
40% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

@keyframes animateHeartOut {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
Loading

0 comments on commit d19a516

Please sign in to comment.