How to use Animation and Dropdown in LWC Lightning Web Component.

Hi Trailblazers, In this blog post I'm going to use Animate.css for creating Animation and Lightning Combobox for Dropdown in Lightning Web Component.

Before Start, Let's have a look on Demo,  Click on following Link.

Demo for Animation & Dropbox

Here is the Youtube Video:

https://www.youtube.com/watch?v=0gZwEhGHr3M

Why we use animation?

Animations are helpful to improve the UX of an interface, but keep in mind that they can also get in the way of your users!

Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface

Why animate.css?

Animate.css provides various types of Animations, We don't need to create our own Css class for animation.

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

Why lightning-combobox for dropdown?

A combobox enables you to select only one option. Use the onchange event handler to capture what's selected. Get more about it from following Link.

https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/example

Requirements:

Salesforce Org enabled with Dev hub

Vs Code with Salesforce Extensions

Workflow:

1. We'll download Animate.css and Add it to Static Resource of Salesforce.

2. After it, We'll create a Lightning Web Component.

3. We'll load Animate.css in Lightning Web Component.

4. Then, We'll use Lightning-Combobox for Dropdown.

5. In last, We'll deploy this component to Salesforce.

Let's Start:

First we need to download Animate.css

Click on following link:

https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

Copy all the code and Create a css file from it.

Now, Create a static resource in Salesforce and Upload this file in the Static Resource.

Name : AnimationCss

Now, Let's create a Lightning Web Component.

In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).

Type SFDX.

Select SFDX: Create Lightning Web Component.

Don't use SFDX: Create Lightning Component. (This creates an Aura component.)

Enter animation for the name of the new component.

Press Enter to accept the default force-app/main/default/lwc.

Press Enter.

View the newly created files in Visual Studio Code.

Now, We'll load Animate.css in JS file.

We need to import it from Salesforce.

import animate from '@salesforce/resourceUrl/AnimationCss';

Add this,

import { loadStyle } from 'lightning/platformResourceLoader';

For loading Animate.css, We'll use JS Promise.

Promise.all([
        loadStyle(this, animate),
    ])

Now, We'll add lightning-combobox.

In Html:

 <lightning-combobox
            name="progress"
            label="Status"
            value={value}
            placeholder="Select Progress"
            options={options}
            onchange={handleChange} ></lightning-combobox>
    <p>Selected value is: {value}</p>

In JS:

   value = 'inProgress';

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

    handleChange(event) {
        this.value = event.detail.value;
    }

Above 2 files are pretty clear.

After Modifying above Code

Here is final code:

animation.html

<template>
<div class="slds-box outerPart outerDesign">
<div class="slds-box outerPart design ">
  <img class={value} src={SfLogo} width="80%"> <!--Add Image here-->
</div>
<lightning-combobox
              name="progress"
              label="Attention seekers"
              value={value}
              placeholder="Select a Animation"
              options={options}
              onchange={handleChange} >
  </lightning-combobox>
  <lightning-combobox
              name="progress1"
              label="Back entrances"
              value={value}
              placeholder="Select a Animation"
              options={options1}
              onchange={handleChange} >
</lightning-combobox>
<lightning-combobox
              name="progress2"
              label="Flippers"
              value={value}
              placeholder="Select a Animation"
              options={options2}
              onchange={handleChange} >
</lightning-combobox>
  <p >Animation : {value}</p>
</div>
</template>

animation.js

import { LightningElement,track } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import animate from '@salesforce/resourceUrl/AnimationCss';
import heySfLogo from '@salesforce/resourceUrl/heySfLogo';
export default class Animation extends LightningElement {
SfLogo = heySfLogo ;
@track value = 'inProgress';
renderedCallback() {
    Promise.all([
        loadStyle(this, animate),
        // loadStyle(this, FullCalendarJS + '/fullcalendar.print.min.css')
    ])
    .then(() => {
        // Initialise the calendar configuration
        console.log('Style Loaded');
    })
    .catch(error => {
        // eslint-disable-next-line no-console
        console.error({
        message: 'Error occured on FullCalendarJS',
        error
        });
    })
    }
    get options() {
    return [
                { label: 'Bounce', value: 'animate__bounce' },
                { label: 'Flash', value: 'animate__flash' },
                { label: 'Pulse', value: 'animate__pulse' },
                { label: 'RubberBand', value: 'animate__rubberBand' },
                { label: 'ShakeX', value: 'animate__shakeX' },
                { label: 'ShakeY', value: 'animate__shakeY' },
                { label: 'Swing', value: 'animate__swing' },
            ];
}
get options1() {
    return [
                { label: 'BackInDown', value: 'animate__backInDown' },
                { label: 'BackInLeft', value: 'animate__backInLeft' },
                { label: 'BackInRight', value: 'animate__backInRight' },
                { label: 'BackInUp', value: 'animate__backInUp' },
            ];
}
get options2() {
    return [
                { label: 'Flip', value: 'animate__flip' },
                { label: 'FlipInX', value: 'animate__flipInX' },
                { label: 'FlipInY', value: 'animate__flipInY' },
                { label: 'FlipOutX', value: 'animate__flipOutX' },
                { label: 'FlipOutY', value: 'animate__flipOutY' },
            ];
}

handleChange(event) {
        this.value = "animate__animated "+event.detail.value;
        }

}

animation.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

animation.css

.design
{
    background-color:rgb(228 245 237 / 48%);
    text-align: center;
    padding: 40px;
}
.outerDesign
{
    background-color:rgb(0 156 219 / 20%);
}
p
{
    color: white;
}
.slds-form-element__label
{
    color: white;
}

Run following Command for Deploying it to Salesforce:

sfdx force:source:deploy -p force-app -u [email protected]

Use your username instead of [email protected]

After Successful Deployment:

Now Open your Org and Add it to home page.

This is how it Looks, Check Demo:

Demo for Animation & Dropbox

Thanks for Reading:

If you have any Question? Ask me

For Suggestions, Write a comment.