How to Create Apple Music Card Animation Effect In LWC?

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


Follow Us

Posted By : Sudeer Kamat Date :

view_module Related

  • How to Create Netflix Card Animation Effect In LWC?How to Create Netflix Card Animation Effect In LWC?
  • How To Integrate YouTube API Using LWC In Salesforce?How To Integrate YouTube API Using LWC In Salesforce?
  • How To Integrate Github Using Fetch API In LWC?How To Integrate Github Using Fetch API In LWC?
  • How To Create Animate Email Notification Using LWC?How To Create Animate Email Notification Using LWC?
  • How to Create Owl Animated Login Screen In LWC?How to Create Owl Animated Login Screen In LWC?

Comments 0