How to Create Apple Music Card Animation Effect In LWC?
In this blog, you will learn how you can create Apple Music Card Animation Effect in lightning web component.
Sample Code
LWC.html
<template>
<lightning-card title="Apple Music" icon-name="custom:custom51">
<lightning-layout>
<lightning-layout-item padding="around-small">
<div class="header-column">
<div class="container">
<image src="https://assets.stickpng.com/images/602173aa0ad3230004b93c1b.png" style="max-width: 100%;width: 60px;height: auto; margin-top: -150px; margin-right: -225px;"></image>
<div class="content">
<h1>Hits</h1>
<p>in Spatial Audio</p>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</lightning-layout-item>
<lightning-layout-item padding="around-small">
<div class="header-column">
<div class="container" style=" background: #ea789c;">
<image src="https://assets.stickpng.com/images/602173aa0ad3230004b93c1b.png" style="max-width: 100%;width: 60px;height: auto; margin-top: -150px; margin-right: -225px;"></image>
<div class="content">
<h1>Bollywood</h1>
<p>in Spatial Audio</p>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</lightning-layout-item>
<lightning-layout-item padding="around-small">
<div class="header-column">
<div class="container" style="background-color: #47afda;">
<image src="https://assets.stickpng.com/images/602173aa0ad3230004b93c1b.png" style="max-width: 100%;width: 60px;height: auto; margin-top: -150px; margin-right: -225px;"></image>
<div class="content">
<h1>Dance</h1>
<p>in Spatial Audio</p>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
LWC.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
<target>lightning__AppPage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
LWC.css
body {
background-color: #25272c;
display: grid;
place-items: center;
height: 100vh;
}
.container {
background: #eb5bec;
border-radius: 16px;
display: grid;
height: 385px;
overflow: hidden;
place-items: center;
position: relative;
width: 315px;
}
.container::after {
background-image: url("https://assets.codepen.io/9632/dolby-atmos.webp");
background-position: center;
background-repeat: no-repeat;
background-size: 50px;
content: "";
height: 100%;
position: absolute;
width: 100%;
}
.content {
color: #fff;
font-family: system-ui;
position: relative;
text-align: center;
top: -6rem;
z-index: 2;
}
.content h1 {
font-size: 3rem;
font-weight: 500;
margin: 0;
margin-top: -150px;
}
.content p {
margin: 0;
}
.box {
--delay: 1s;
animation: grow 10s linear infinite;
animation-delay: var(--delay);
background: #471e45;
height: 100px;
opacity: 0.5;
position: absolute;
width: 100px;
}
.box:nth-child(2) {
--delay: 2s;
}
.box:nth-child(3) {
--delay: 3s;
}
.box:nth-child(4) {
--delay: 4s;
}
.box:nth-child(5) {
--delay: 5s;
}
.box:nth-child(6) {
--delay: 6s;
}
.box:nth-child(7) {
--delay: 7s;
}
.box:nth-child(8) {
--delay: 8s;
}
.box:nth-child(9) {
--delay: 9s;
}
.box:nth-child(10) {
--delay: 10s;
}
@keyframes grow {
from {
opacity: 0.5;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(3.85);
}
}
Demo
Posted By :
Date :
Date :
Follow Us