Here is an overview of what you’ll be building:

You can also check my online collection to see up to 20 variations using a zig-zag shape.

We won’t study all the variations but I will show you a few tricks that’ll help you create as many variations as you want.

How to Create a Zig-Zag Shape

The first step is to create a zig-zag shape. For this, you can grab the code from my CSS shape website: https://css-shape.com/zig-zag-line/.

You can adjust the different variables to get the zig-zag you want. In our case, I will use an easier version with no variables.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  background:
   conic-gradient(from 135deg at top,#000 90deg,#0000 0) top,
   conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

And here is a figure to illustrate how those gradients create the shape:

The first gradient created the red part while the second one created the green part. We have two triangle shapes that repeat horizontally.

Since we have five repetitions, I used aspect-ratio: 5 and 20% (100%/5) in the background-size. You can make it more generic by introducing a variable to control the number of repetitions but as I said previously, I am going to keep things simple.

I want to point out that when using gradients, you can achieve the same result by using different syntaxes. For example, I can update the previous code with the following:

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  background:
   conic-gradient(from 135deg at top   ,#000 90deg,#0000 0),
   conic-gradient(from -45deg at bottom,#000 90deg,#0000 0) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

It’s still the same output but with a different syntax for the second gradient. Did you notice the repeated part within the gradients? That part controls the coloration and we can define it as a variable to avoid repetition and be able to update the color only once in the code.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  --c:#000 /* the color */ 90deg,#0000 0;
  background:
   conic-gradient(from 135deg at top   ,var(--c)),
   conic-gradient(from -45deg at bottom,var(--c)) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

Now we have our zig-zag shape and we are ready to animate it.

How to Animate the Zig-Zag Shape

Since we’re using a background, we’ll animate the background-position to get our first loader. The idea is to move the gradients horizontally and create an infinite movement.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  --c:#000 /* the color */ 90deg,#0000 0;
  background:
   conic-gradient(from 135deg at top   ,var(--c)),
   conic-gradient(from -45deg at bottom,var(--c)) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
  animation: loading .8s infinite linear;
}

@keyframes loading {
  0%   {background-position: 0   0,12.5% 100%}
  100% {background-position: 25% 0,37.5% 100%}
}

Note how we increased the X value of the background-position by 25%. In case you are wondering what the logic behind that value is, here is the formula:

0.2 / (1 - 0.2) = .25 = 25%

.2 corresponds to the 20% used inside the background-size.

We have our first loader! Actually, two loaders because we can easily change the direction of the movement by adding animation-direction: reverse.

Let’s try a different animation: using clip-path and the inset() value. We can easily adjust this technique to create many variations.

Let’s start with a basic example:

.loader {
  /* same code as previously */
  animation: loading .8s infinite linear;
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

The inset() value creates a rectangle where only the part inside it will be visible. For this, we define a distance from each side of the element (top, right, bottom, left).

Logically, inset(0 0 0 0) shows the whole element since all the distances are equal to 0, but inset(0 100% 0 0) completely hides the element since the right value is equal to 100%. So it will touch the opposite edge, creating an empty rectangle.

By animating that right value from 100% to 0 we create a reveal animation. Another loader variation!

If you inspect the code of the second animation, you will see that I did the same thing but with the left side.

We can also have a sliding effect if we animate both the left and right values while keeping their difference constant.

.loader {
  /* same code as previously */
  animation: loading .8s infinite linear;
}
@keyframes loading {
  0%   {clip-path: inset(0 60% 0 0  )}
  100% {clip-path: inset(0 0   0 60%)}
}

The right value animates from 60% to 0 and the left one from 0 to 60%, so we have a constant difference equal to 60% which will create the illusion of a sliding rectangle. Another cool loader!

By trying different combinations of inset() values, you can get a lot of CSS loaders. Give it a try! You can also check my online collection and try to identify the variations that use clip-path: inset().

How to Create a Discrete Animation

To achieve a discrete animation, you can use the steps() timing function instead of linear. Let’s start with the first example using steps(2).

We can do the same with almost all the variations. Let’s try with the ones that use clip-path: inset().

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(5);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

We have five repetitions so let’s see what we’ll get with steps(5).

At the moment, it’s not good because we don’t see all the repetition. The animation stops at 4 repetitions, but we need to see the whole element (5 repetitions). The count starts from 0 so what we really need is 6 steps instead of 5 to show all the repetitions.

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(6);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

Even with 6 steps, the result is still not good but don’t worry, it’s not a bug. The default behavior of steps() gives us that output but we can update it to get the expected output:

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(6,jump-none);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

If you’re not familiar with jump-none, it’s a value that can fix most of your issues when working with steps(). I wrote a short article about it if you want more details: “How to correctly use steps() with animations“

Our animation looks perfect now! We can also make it an 11-step animation (5×2 + 1) and get another cool loader.

Even the sliding effect can have its discrete variation.

Can you figure out why I am using 4 and 7 steps? I’ll let you do the calculation as a small exercise.

Conclusion

This article showed you how to create zig-zag shapes, how to animate them using clip-path, and how to make a discrete animations. You can also consider more tricks like using both pseudo-elements to have two shapes.

I didn’t explore all the variations but you now have the recipe to create most of them!

You can explore my Zig-Zag loaders collection to study other variations and try to create your own loader. It’s a good opportunity to practice what you have learned from this article.

I think a demo is worth thousands of words, so check out this Codepen:

In the above Pen, I’m showing you four different CSS filler-style loaders – but we can make even more. You can check out this collection I created to see more than 20 different loaders.

You might think the article is going to be super long – I mean, how long will it take to explain how to create 20 different CSS loaders?

Well don’t worry – this tutorial will be super quick, because I’ll show a few CSS tricks that help you create as many variation as you want. The loaders look different, but all of them rely on the same techniques. By simply adjusting a few setting you can get a whole new loader.

The Initial Loader Configuration

Like all the CSS Loaders I create, the HTML code is a simple as a single element. Nothing more! Here’s what it looks like:

<div class="loader">Loading</div>

Then we apply the following CSS:

.loader {
  font-weight: bold;
  text-transform: uppercase;
  color: #0000; /* or transparent */
  -webkit-text-stroke: 1px #000;
}

Nothing fancy so far. We make the text transparent and we add a black stroke to it. Here’s what that looks like:

The -webkit-text-stroke is still tagged as experimental, but it has good browser support so you should be able to use it without any issues. This said, it’s always good to test your code in different browsers to make sure everything works fine.

How to Fill the Text with Colors

Now it’s time to fill our text (that’s why this technique is called the Filling CSS loaders!). To do this, we are going to rely on gradients and background-clip: text. Here’s the code:

.loader {
  background-image: conic-gradient(#000 0 0);
  background-position: left;
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-clip: text;
}

Or the shorthand version if you prefer more compact code:

.loader {
  background: 
    conic-gradient(#000 0 0) text
    left/40% 100% no-repeat;
}

The above figure illustrates the difference between using or not using background-clip: text. It’s pretty clear that the left result is what we are aiming for. We are limiting the background coloration to only the text instead of the whole element.

The conic-gradient(#000 0 0) looks strange, right? It lets you have a one-color gradient. I wrote a small tip about it that I invite you to read to understand why we’re using that particular syntax in this article, “How to correctly define a one-color gradient“.

How to Create the Filling Loaders

Believe it or not, we’re almost done because we have everything we need to make the CSS loaders. For the first loader, we simply animate the background-size as follows:

#l1 {
  animation: l1 1s linear infinite;
}
@keyframes l1 {  /*  width  height */
  0% {background-size: 0%   100%}
  to {background-size: 120% 100%}
}

We start with a width equal to 0% until we reach a width equal to 120%. I could have used 100%, but I want the full coloration to stay longer so I am using a value bigger than 100%. As for the height (the second value of the background-size), it remains at 100%.

The second loader uses the same animation, but instead of a linear timing function, we use steps() to have a discrete animation.

#l2 {
  font-family: monospace;
  animation: l2 2s steps(8, jump-none) infinite;
}
@keyframes l2 {
  0% {background-size: 0%           100%}
  to {background-size: 100% 100%}
}

The text contains 7 characters so we use 8 steps (N + 1). I am also using a monospace font to make sure all the characters have the same width. In case you are wondering about the jump-none value, read the following: How to correctly use steps() with animations.

That’s basically the main trick. By animating the background properties, we create different kinds of loaders. It’s either the background-size like the previous ones or the background-position like the below:

Can you figure out how they work before checking my code? This will be your first homework!

How to Use Multiple Gradients

Using one gradient is enough to create a lot of variations – but we can do even more if we introduce multiple gradients. If you check the fourth loader of the first demo, you’ll see that I’m using seven gradients – one gradient per character.

#l4 {
  font-family: monospace;
  --g: conic-gradient(#000 0 0) no-repeat text;
  background: var(--g) 0,var(--g) 1ch,var(--g) 2ch,var(--g) 3ch,var(--g) 4ch,var(--g) 5ch,var(--g) 6ch;
  background-position-y: bottom;
  animation: l4 3s infinite;
}
@keyframes l4 {
  0%     {background-size: 1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  14.28% {background-size: 1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  28.57% {background-size: 1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  42.85% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  57.14% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   }
  71.43% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   }
  85.71% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   }
  100%   {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%}
}

I’m using the same gradient, so we consider a CSS variable --g to avoid repetition. Then, I call that variable 7 times inside the background property. All the gradients have the same Y position (bottom) but a different X position. That’s why you see the 0, 1ch, 2ch, …,6ch.

Now if you check the animation, I’m simply animating the height of each gradient individually. At 0%, all of them have a height equal to 0. Then I update their height one by one until all of them are at 100%. The width doesn’t change – it’s always equal to 1ch (the width of one character).

It may look difficult at first glance, but if you think about it one gradient at a time, it’s pretty simple.

What about the third loader, you might ask? For that one, I will rely on my online generator for wavy shapes to generate the gradient configuration:

Then I animate the background-position like below:

#l3 {
  background:
    radial-gradient(1.13em at 50% 1.6em,#000 99%,#0000 101%) calc(50% - 1.6em) 0/3.2em 100%,
    radial-gradient(1.13em at 50% -0.8em,#0000 99%,#000 101%) 50% .8em/3.2em 100% repeat-x;
  background-clip: text;
  animation: l3 2s linear infinite;
}
@keyframes l3 {
  0% {background-position: calc(50% - 1.6em) 0,     50%          .8em}
  to {background-position: calc(50% + 1.6em) 0,calc(50% + 3.2em) .8em}
}

This one is probably a bit trickier, but it’s another example to illustrate all the possibilities. From the simple gradient configuration to the most complex one, we can create as many loaders as we want.

What about creating your own CSS loader? You can use what you have learned from the article and try to create a loader that is not part of my collection. The best way to learn is to practice – so give it a try!

Conclusion

By creating some cool loaders, we went through a bunch of CSS tricks related to gradients and backgrounds. Even if creating loaders is not your goal, you can always re-use the same tricks to do something else.

Don’t forget to check my CSS Tip blog where I am sharing cool CSS tricks and demos.

Using carousels, you can implement image slides, video slides, text slides, interactive image galleries, product catalogs, team profiles, and more.

Swiper.js comes with powerful functionalities that make it easy to create functional, reusable carousel components with stunning effects and functionality. You can enable zooming in and out from images, horizontal and vertical image scrolling, parallax slide effects, and infinite loop slides, just to mention a few.

In this tutorial, we’ll be focusing on the new version of Swiper, 11.0.6, and the new Swiper Element that is recommended for building slides in Swiper.js.

By the end of this guide, you should be able to implement the new Swiper Element from Swiper.js to create responsive, dynamic slides with pre-made effects in your React project.

Table of Contents

• What is Swiper.js?
• Installations
• How to Set Up Swiper
  • Node Modules
  • Swiper Custom Elements from CDN
  • Swiper Custom Elements
• Swiper Parameters as Attributes
• Responsive Breakpoints in Swiper Element
• Pagination and Navigation
• Lazy Loading Images
• Effects in Swiper Element
• Vertical Sliders
• How to Style Swiper Element
  • Reset Swiper Custom Styles
  • Create a New Class Name
• How to Build a Custom Slider Element
• Summary
• References

Prerequisites

Before you get started, you'll need to have basic knowledge of React.js.

If you need a refresher, you can check out this React handbook for beginners.

What is Swiper.js?

Swiper is a free, modern JavaScript library for building touch sliders (Carousels) with hardware transitions and amazing native behaviors.

Swiper is built for mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper also comes with great support and functionalities for Desktop websites and web applications.

As of the time of writing, Swiper v11.0.6 recommends migrating to Swiper Element instead of Swiper React Components, which will likely be removed in future versions. In this tutorial, we’ll be focusing on Swiper Element and its use cases.

Installations

To get started, generate some React boilerplate code with Vite.js. Next, navigate to the project directory in your Terminal and type the command below to install Swiper.js:

npm i swiper

Next, type the command below to launch your React.js boilerplate code:

npm run dev

Click on the port URL on the Terminal to open up your React boilerplate code on the browser.

How to Set Up Swiper

To use Swiper in a React project, you can use the following methods.

Node Modules

If you install Swiper via npm i swiper, then import the custom element from node_modules and register it.

├─ main.jsx

// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
// register Swiper custom elements
register();

This should be done once directly on the main.jsx file to install it globally.

Swiper Custom Elements from CDN

To enable Swiper Element, include the CDN link in the script tag as indicated below:

├─ index.html
<head>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
</head>

Do this once directly on the index.html file to enable it globally.

Swiper Custom Elements

If you’ve successfully set up Swiper Element, and call the register() method. To create a slider, you'll need to use <swiper-container> and <swiper-slide> from Swiper.js.

export default function Usage() {
  return (
    <>
    <main>
        <swiper-container>
            <swiper-slide>Slide1</swiper-slide>
            <swiper-slide>Slide2</swiper-slide>
            <swiper-slide>Slide3</swiper-slide>
            <swiper-slide>Slide4</swiper-slide>
            <swiper-slide>Slide5</swiper-slide>
        </swiper-container>
    </main>
    </>
  )
}

The code above shows how to structure slides using Swiper Custom Elements.

• <swiper-container>: This is the parent element that serves as a container to the <swiper-slide> Custom Element and other HTML Elements that make up the slides. Any Element that is nested inside the <swiper-container> Custom Element is treated as a slide.
• <swiper-slide>: This is the direct child of the <swiper-container> Custom Element. The <swiper-slide> serves as the individual slide of the slider components.

For clarity purposes, I have added some custom CSS styles to make it visually appealing and easy to understand. Copy the code below: 👇

*,*::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: calibri;
}

body {
    display: flex;
    justify-content: center;
}

swiper-container {
    width: 800px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}

swiper-slide {
    background-color: rgb(4 47 46);
    color: #fff;
    font-size: 25px;
}

swiper-slide:nth-child(2) {
    background-color: rgb(15 118 110);
}

swiper-slide:nth-child(3) {
    background-color: rgb(45 212 191);
}

swiper-slide:nth-child(4) {
    background-color: rgb(153 246 228);
}

swiper-slide:nth-child(5) {
    background-color: rgb(34 197 94);
}

Your code should look just like this in your browser:

Swiper Parameters As Attributes

Parameters in Swiper are key and value or key, subkey, and value pairs as indicated below.

const swiper = new Swiper('.swiper', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
mousewheel: {
    invert: true,
  },
slidesPerView: 3,
spaceBetween: 20,
scrollbar: {
    clickable: true,
});

The above code is valid if we are working directly on the index.html file and we're using the swiper and swiper-slide classes on div elements.

For Swiper Custom Elements, you can write the same code as follows: 👇

export default function Usage() {
return (
    <>
    <main>
    👉  <swiper-container slides-per-view="3" space-between="20" scrollbar-clickable="true" mousewheel-invert="true">
            <swiper-slide>Slide1</swiper-slide>
            <swiper-slide>Slide2</swiper-slide>
            <swiper-slide>Slide3</swiper-slide>
            <swiper-slide>Slide4</swiper-slide>
            <swiper-slide>Slide5</swiper-slide>
        </swiper-container>
    </main>
    </>
)
}

All Swiper parameters are written in the form of kebab-case attributes on the <swiper-container> Custom Elements.

Parameters with subkeys and values are written as a single attribute and value. For example, scrollbar-clickable=”true” is a parameter with subkey (clickable) now written as a single attribute with a value.

If you run the code above, you should get the same result as below:

From the browser out, we’ve been able to split the view to three-column views instead of the one-column view we previously had. We were able to do this using the slide-per-view attribute parsed to the <swiper-container> Custom Element. For the full available list of parameters, see the Swiper APIs.

Responsive Breakpoints in Swiper Element

Swiper Custom Element requires attributes to parse parameter objects. Where complex object properties are required in the case of breakpoints, we can use JSON.stringify() to convert objects to strings, making the breakpoints object properties readable values to the <swiper-container>.

Consider the code example below:

export default function Usage() {
return (
    <>
    <main>
        <swiper-container breakpoints={
            JSON.stringify({

                640:{
                    slidesPerView: 1,
                    spaceBetween: 20,
                },

                768: {
                    slidesPerView: 3,
                    spaceBetween: 40,
                },

                1024: {
                    slidesPerView: 4,
                    spaceBetween: 50,
                }
            })
        }>
            <swiper-slide>Slide1</swiper-slide>
            <swiper-slide>Slide2</swiper-slide>
            <swiper-slide>Slide3</swiper-slide>
            <swiper-slide>Slide4</swiper-slide>
            <swiper-slide>Slide5</swiper-slide>
            <swiper-slide>Slide6</swiper-slide>
            <swiper-slide>Slide7</swiper-slide>
            <swiper-slide>Slide8</swiper-slide>
            <swiper-slide>Slide9</swiper-slide>
        </swiper-container>
    </main>
    </>
)
}

Here, we are adding three different breakpoints 640, 768, and 1024 respectively for three different screen sizes (media queries), where 640 means (max-width:640px) for small screens.

Your code should look like this when you run it on the browser:

Keep in mind that breakpoints respond as soon as the components mount (that is, React renders the components for the first time). So if you happen to resize your Desktop browser while learning this, you will need to reload the entire page by clicking on the reload icon to see the breakpoints changes.

Pagination and Navigation

Swiper comes with navigation and pagination parameters for adding controls to sliders. With navigation, you can move from the current slide to the previous or next slide, while with pagination you can jump to a specific slide within the slider container.

To enable this on the swiper custom element, apply each parameter as an attribute on the <swiper-container> with a value of true.

export default function Usage() {

return (
    <>
    <main>
    <swiper-container space-between="10" slides-per-view="3" pagination="true" navigation="true" >
            <swiper-slide>Slide1</swiper-slide>
            <swiper-slide>Slide2</swiper-slide>
            <swiper-slide>Slide3</swiper-slide>
            <swiper-slide>Slide4</swiper-slide>
            <swiper-slide>Slide5</swiper-slide>
        </swiper-container>
    </main>
    </>
)
}

Your code should look just like this on the browser:

To move the slides, click on the navigation arrow or pagination bullet points.

Lazy Loading Images

We can implement lazy loading on image sliders in Swiper Custom Elements. Apply the lazy=”true” and loading=”lazy” as attributes on the <swiper-slide> and the <img /> tag, respectively.

export default function Usage() {

return (
    <>
    <main>
    <swiper-container style={
        {
        "--swiper-navigation-color": "#fff", 
        "--swiper-pagination-color": "#fff"
        }
    } 
    pagination-clickable="true" 
    navigation="true" 
    className="mySwiper">
            <swiper-slide lazy="true">
                <img src="https://source.unsplash.com/slightly-opened-silver-macbook-mP7aPSUm7aE" loading="lazy" alt="" />
            </swiper-slide>

            <swiper-slide lazy="true">
                <img loading="lazy" src="https://source.unsplash.com/macbook-y0_vFxOHayg" alt="" />
            </swiper-slide>

            <swiper-slide lazy="true">
                <img loading="lazy" src="https://source.unsplash.com/black-macbook-near-black-iphone-7-plus-and-black-apple-watch-HY3l4IeOc3E" alt="" />
            </swiper-slide>

            <swiper-slide lazy="true">
                <img loading="lazy" src="https://source.unsplash.com/apple-products-on-table-tdMu8W9NTnY" alt="" />
            </swiper-slide>

            <swiper-slide lazy="true">
                    <img loading="lazy" src="https://source.unsplash.com/turned-on-ipad-Im8ylpB8SpI" alt="" />
            </swiper-slide>
        </swiper-container>
    </main>
    </>
)
}

Implementing lazy loading on images will require the lazy preloader element to be added to each slide on the <swiper-slide> component when lazy="true" is set on the element.

I added some CSS styles to clean things up a bit, so you can just copy the below code:

*,*::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: calibri;
}

body {
    display: flex;
    justify-content: center;
}

swiper-container {
    width: 800px;
    height: 400px;

}

swiper-slide {
   width: 100%;
   height: 100%;
}

swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Your code should look like this when you run it on the browser:

Effects in Swiper Element

You can add effects in Swiper Element by setting the effect attribute to the desired value you need for your project. For example, we implemented a cube effect to create a 3D-like slide display.

export default function Usage() {

return (
    <>
    <main>
    <swiper-container style={
        {
        "--swiper-navigation-color": "#fff", 
        "--swiper-pagination-color": "#fff"
        }
    } 

    pagination-clickable="true" 
    navigation="true"
    effect="cube"
    grab-cursor="true"
    cube-effect-shadow="true"
    cube-effect-slide-shadows="true"
    cube-effect-shadow-offset="20"
    cube-effect-shadow-scale="0.94"

    className="mySwiper">
            <swiper-slide >
                <img src="https://source.unsplash.com/slightly-opened-silver-macbook-mP7aPSUm7aE"  alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/macbook-y0_vFxOHayg" alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/black-macbook-near-black-iphone-7-plus-and-black-apple-watch-HY3l4IeOc3E" alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/apple-products-on-table-tdMu8W9NTnY" alt="" />
            </swiper-slide>

            <swiper-slide>
                    <img src="https://source.unsplash.com/turned-on-ipad-Im8ylpB8SpI" alt="" />
            </swiper-slide>
        </swiper-container>
    </main>
    </>
)
}

Your code should look like this on the browser:

Here, we apply the cube effect's attributes as follows:

• effect=”cube”: sets the slider to a cube
• grab-cursor=”true”: changes the cursor to a grabbable icon.
• cube-effect-shadow=”true”: sets the shadow to the main slide component
• cube-effect-slide-shadows=”true”: sets the shadow to the slide element
• cube-effect-shadow-offset=”true”: sets the offset direction of the shadow
• cube-effect-shadow-scale: sets the size of the shadow

Aside from the cube effect, you can specify other values as you can find listed in the Swiper API here.

Vertical Sliders

To apply vertical slides, simply apply the direction="vertical” attribute on the <swiper-component> as you can see in the code below:

export default function Usage() {

return (
    <>
    <main>
    <swiper-container style={
        {
        "--swiper-navigation-color": "#fff", 
        "--swiper-pagination-color": "#fff"
        }
    } 

    pagination-clickable="true" 
    navigation="true"

    direction="vertical"

    className="mySwiper">
            <swiper-slide >
                <img src="https://source.unsplash.com/slightly-opened-silver-macbook-mP7aPSUm7aE"  alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/macbook-y0_vFxOHayg" alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/black-macbook-near-black-iphone-7-plus-and-black-apple-watch-HY3l4IeOc3E" alt="" />
            </swiper-slide>

        </swiper-container>
    </main>
    </>
)
}

Your code should look like this when you run it on the browser:

How to Style Swiper Element

Styling Swiper Element is very straightforward. Swiper comes with lots of premade classes that are applied to Swiper parameters (Attributes in Swiper Custom Elements). We can overwrite the default style rules on these classes with the HTML style attribute or external CSS rules.

Swiper Custom Elements can be styled in two ways: you can reset the default styles on the Swiper Custom Elements and the Custom CSS Classes, or create a new class name on the Swiper Element and style it.

Reset Swiper Custom Styles

To reset the Swiper Custom Element styles, target the specific Swiper Custom Elements or classes that the default styles are applied to and change them to your desired styles.

export default function Usage() {

return (
    <>
    <main>
    <swiper-container style={
        {
        "--swiper-navigation-color": "#fff", 
        "--swiper-pagination-color": "#fff"
        }
    } 

    pagination-clickable="true" 
    navigation="true"

    className="mySwiper">
            <swiper-slide >
                <img src="https://source.unsplash.com/slightly-opened-silver-macbook-mP7aPSUm7aE"  alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/macbook-y0_vFxOHayg" alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/black-macbook-near-black-iphone-7-plus-and-black-apple-watch-HY3l4IeOc3E" alt="" />
            </swiper-slide>

        </swiper-container>
    </main>
    </>
)
}

From the code sample above, the --swiper-navigation-color and --swiper-pagination-color are set to the #fff color to change the default colors on the navigation and pagination buttons from the #007aff light blue color. Depending on what you are working on, you can customize this further using other custom classes from the Swiper APIs.

Additionally, the <swiper-container> and <swiper-slide> are styled as follows:

*,*::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: calibri;
}

body {
    display: flex;
    justify-content: center;
}

swiper-container {
    width: 800px;
    height: 400px;

}

swiper-slide {
   width: 100%;
   height: 100%;
}

swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

From the code sample above, the swiper-container is set to width: 800px and height: 400px to give the swiper-container a defined width and height. The swiper-slide is set to 100% on both width and height to intrinsically set any child element of the swiper-slide to the default size of the swiper-container.

Also, the swiper-container does not have a specific width and height set. This makes it take the default size of the content within the swiper-slide.

Also, note that the swiper-container and swiper-slide are styled as an actual HTML element without a period (.) for class or hash sign (#) for id.

Your code should look like this when you run it on your browser:

Create a New Class Name

Sometimes, a single page can contain multiple <swiper-container> that solve different problems, and each may require its own styles. Creating a new class name might be very useful to provide different styling options.

<swiper-container className="image-swiper" >
            <swiper-slide >
                <img src="https://source.unsplash.com/slightly-opened-silver-macbook-mP7aPSUm7aE"  alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/macbook-y0_vFxOHayg" alt="" />
            </swiper-slide>
 </swiper-container>

The image-swiper class indicates that the Swiper Element is an image slider.

How to Build a Custom Slider Element

Swiper has default controls such as navigation and pagination, which makes it easy to control the slides within the swiper-container. The navigation and pagination come with some default icons for user interaction.

For example, you have the left and right angle icons for navigation and small bullet icons for pagination. But based on your design or UI requirements for a specific website or application, this might need to change.

Below is a simple way of implementing custom SVGs as navigation icons and customizing the pagination for better user interaction.

export default function Usage() {

return (
    <>
    <main className="slider-main-container">
        <swiper-container

            navigation-next-el=".custom-next-button"
            navigation-prev-el=".custom-prev-button"
            pagination-clickable="true"
            pagination-dynamic-bullets="true"
            autoplay-delay="2000"
            autoplay-disable-on-interaction="false"
            center-slides="true"

            style={
                {
                "--swiper-pagination-color": "#fff",
                "--swiper-pagination-bullet-size": "15px",
                }
            }
        >
            <swiper-slide>
                <img src="https://source.unsplash.com/white-lamborghini-aventador-parked-in-building-7_OQMgoGzDw"  alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/shallow-focus-photo-of-white-sedan-oN661Kw9ZOY" alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/black-car-interior-4xM5cytsdMo" alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/turned-on-monitor-inside-vehicle-tU-L__PI7gw" alt="" />
            </swiper-slide>

            <swiper-slide>
                <img src="https://source.unsplash.com/black-and-blue-vacuum-cleaner-rHfTdK9YU2Q" alt="" />
            </swiper-slide>

            {/* Navigations */}
        </swiper-container>

        <div className="nav-btn custom-prev-button">
          {/* <!-- https://feathericons.dev/?search=arrow-left&iconset=feather --> */}
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" className="main-grid-item-icon" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
            <line x1="19" x2="5" y1="12" y2="12" />
            <polyline points="12 19 5 12 12 5" />
            </svg>
        </div>

        <div className="nav-btn custom-next-button">
             {/* <!-- https://feathericons.dev/?search=arrow-right&iconset=feather --> */}
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" className="main-grid-item-icon" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
            <line x1="5" x2="19" y1="12" y2="12" />
            <polyline points="12 5 19 12 12 19" />
        </svg>
        </div>
    </main>
    </>
)
}

Here's what's going in in the above code:

• navigation-next-el=".custom-next-button": used to specify the custom element for next navigation icon.
• navigation-prev-el=".custom-prev-button": used to specify the custom element for prev navigation icon.
• pagination-clickable="true": enables and sets the pagination to a clickable button.
• pagination-dynamic-bullets="true": used to the change design presentation of the pagination button.
• autoplay-delay="2000": enables slides to automatically play themselves and repeat.
• center-slides="true": sets the active slide to center.

The SVG icons are declared outside the swiper-container element to prevent it from clipping to the first slide. The <main> tag is set to a class of slider-wrapper to wrap both the custom slider elements and the custom SVGs icons.

I added some CSS for styling. You can copy it here.

*,*::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: calibri;
}

body {
    display: flex;
    justify-content: center;
}

swiper-container {
    width: 800px;
    height: 400px;

}

.slider-main-container {
    position: relative;
}

swiper-slide {
   width: 100%;
   height: 100%;
}

swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-btn {
    display: block;
    position: absolute;
    z-index: 20;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    padding: 2px;
    border-radius: 5px;
    transition: background 0.5s ease;
}

.nav-btn:hover {
    background-color: rgb(255, 165, 0);
}

.nav-btn.custom-prev-button {
    top: 50%;
    left: 2em;
}

.nav-btn.custom-next-button {
    right: 2em;
    top: 50%;
}

Your code should look like this when you run it on the browser:

Summary

Swiper Element is a new way of creating sliders in Swiper.js from the new version 11.0.6.

In this tutorial, I explained how to create and implement the new Swiper Custom Element in a React Application.

You saw some use cases for Swiper.js such as navigation, pagination, slides, effects, and properties. You also learned how to customize Swiper from the default design to give it a more professional style.

Thank you for reading!

References

1. Official Swiper Docs
2. Swiper Element Docs
3. Swiper API reference
4. Swiper Project Demo
5. Swiper Git Issuess

Well today I'll show you how you can create awesome CSS animations in React 18.

As always, we'll work on the real world example but we'll just focus on the animations only to avoid confusion. If you want to see the final results applied to a proper application, then don't worry. I've attached the source code of a pet project so feel free to play with it.

Before we start, I need to give you some context – I designed those animations for my 2048 Game in React. This game is a part of my online course on Udemy but I will tell you more about it at the end of this article.

You can find the source code on GitHub. Here's the final result of what we'll be creating:

All animations of 2048-in-react

🛠️ Prerequisites**

Before we start, make sure you know some basics of React and CSS. It would be great if you are familiar CSS transitions but it isn't necessary. Actually I'm hoping this article will encourage you to go down that rabbit hole on your own. Believe me – nothing is more rewarding than users admiring your work.

Also, you don't need any tools, but if you want to run the example project on your computer, then you will need to install Node.js first.

🕹️ Quick Introduction

If you aren't familiar with the 2048 game, here's the gist: the player must combine tiles containing the same numbers until they reach the number 2048. The tiles can contain only numbers that represent a power of two starting from 2 – this means 2, 4, 8, 16, 32, and so on. The board has dimension of 4 x 4 tiles, so that it can fit up to 16 tiles.

Let me briefly show you what animations I prepared for the game's users:

The first animation is supposed to visualize the tile movement.

The "tile sliding" animation

The game would look janky if tiles disappeared and popped up in different places. CSS transitions help make the movement smooth for users.

The second animation highlights tile creation and their merges.

The "tile highlighting" animation

This animation helps users spot tiles that are changed after the movement.

I think that's all I need to tell you about the project. Let's get our hands dirty!

🌟 How to Create the Highlighting Animation

We'll start with the animation responsible for highlighting changes. I must admit I had a hard time to find a "beautiful" way to visualize it. The main objective was to bring the user's focus to tiles that changed their values or were created. I decided to rescale those tiles because it didn't want the animation to be too "intrusive".

So how is this going to work? First, we'll increase the size of the tile to 110%. Once the tile reaches 110% of its original size, we will downscale it back to 100%. The entire animation will last 0.2s (0.1s upscale, 0.1s downscale). I think that's enough to show the user's updated elements.

We can accomplish this animation using the following CSS transitions:

.tile {
  // ...
  transition-property: transform;
  transition-duration: 100ms;
  transform: scale(1);
}

Brief explanation of those CSS properties:

• transition-property – defines the property on which the transition will be applied. In our case, we want to animate the transformation – the change of the element's size.
• transition-duration – defines transition duration. In our case – 0.1s.
• transform – this property allows us to rotate, scale, skew, or translate an element. Side note: the scale(1) means 100%, and we will use it as a default value.

The CSS transition is ready. Now we need to implement rescaling in React.

export default function Tile({ value }) {
  const [scale, setScale] = useState(1);

  const previousValue = usePreviousProps(value);
  const hasChanged = previousValue !== value;

  useEffect(() => {
    if (hasChanged) {
      setScale(1.1);
      setTimeout(
          () => setScale(1), 
          100 /* 100ms == 0.1s */
      );
    }
  }, [hasChanged, setScale]);

  const style = {
    transform: `scale(${scale})`
  };

  return (
    <div className="tile" style={style}>
      {value}
    </div>
  );
};

Let me briefly explain this code:

1. It sets the initial scale using the useState hook. By default, it's 1 to reflect 100% of the tile size.
2. We take advantage of the usePreviousProps hook to retrieve the previous value of the tile. If the tile is freshly created, the previous value will be undefined.
3. The useEffect hook plays a key role in our animation – it's checking if the tile's value has changed. If yes, it will scale it up to 110% and after 0.1s it will set it back to 100%.
4. The style constant is used to inject inline CSS attributes into the div element.

And the result is the following:

Tile creation (aka "hightlighting")

🛝 How to Create the Sliding Animation

The second animation is responsible for tile movements. I hope you agree with me that users might feel confused if they can't trace tiles moving across the board. After every move they would need to analyze the entire board again. It'd be a poor user-experience.

Let's think about how we can fix it. We could definitely take advantage of CSS properties responsible for positioning, such as left and top. If we follow this approach, we need to add a few additional CSS transitions. Let's do it.

.tile {
  position: absolute;
  // ...
  transition-property: left, top, transform;  // added: left, top
  transition-duration: 250ms, 250ms, 100ms; // added: 250ms, 250ms
  transform: scale(1);
}

Once we've declared the transitions, we can implement the logic responsible for tile movement.

export default function Tile({ value, position }) {
  // ...
  const boardWidthInPixels = 464; 
  const tileCount = 4;

  const positionToPixels = (position) => {
    return (position / tileCount) * boardWidthInPixels;
  };    

  const style = {
    top: positionToPixels(position[0]),
    left: positionToPixels(position[1]),      
    transform: `scale(${scale})`
  };

  // ...
};

As you can see, the equation in the positionToPixels function needs to know the position of the tile, the total number of tiles per row and column, and the total board length in pixels (width or height – same, it is a square). The calculated value is passed down to the style constant which we passed down to the div element in the previous step.

The result is the following:

Animation for tile movement

🏁 Summary

Adding CSS transitions into your React project may seem intimidating at first but it really isn't. As you can see, just a few lines of code significantly improved the user-experience of my game.

Keep in mind that while animations can indeed improve user experience, they can also ruin it. Always aim to find the right balance when you are applying them. It takes some practice, and that's why I hope this article encouraged you to experiment on your own.

The best way to learn is by practicing and learning from others. That's why you should check the source code on my 2048 Game on Github. Don't forget to give it a star 🌟 . It's the easiest way to bookmark it in your profile so you never lose it.

If this article helped you, please share it on your social media or give me a shout-out on Twitter. Thank you!

🏫 Would You Like to Build Your Own 2048 Game?

As I told you at the beginning, I created an online course on Udemy where I teach how to create a fully-functional 2048 Game in React 18. I'm giving 50% discount for freeCodeCamp readers. Just use the code 50DISCOUNT to enroll.

🧑‍🎓 Join my React 18 course on Udemy

What you'll learn:

• How to build 2048 game with React 18 and Next.js.
• Essential React hooks such as useState, useRef, useCallback, useEffect, and many more.
• Managing state using Reducer and React Context.
• How to create responsive mobile apps that support touch events (like mobile swiping).
• Integrate TypeScript into your React projects.
• Testing React apps.

I created this course because I believe programming should be fun and unleash creativity. Rather than build yet another TODO list or a shopping cart, let's create something that you can show to your friends or maybe even a hiring manager!

In this article, we will discuss how to create cool custom animations using CSS.

Prerequisites

Before going forward with this article, make sure you have basic knowledge of HTML and CSS.

I'll assume you are familiar with CSS selectors, defining element size and color, positioning elements, adjusting opacity, and transforming elements.

How to Create Your First CSS Animation

Let's start by preparing an HTML element.

<body>
  <div class="square"></div>
</body>

.square {
  width: 100px;
  height: 100px;
  background-color: purple;

  /* Center the element */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Lines 7 to 10 demonstrate a commonly used method to center an element using CSS. Here's the result of the above code:

Centered square

Before we start crafting the animation, you must first think about what kind of effect you wish to achieve.

For example, for this tutorial, I want to create a bouncing effect for the square. This means I need to create an animation based on the top property so that the square can move up and down.

@keyframes bounce {
  0% {
    top: 90%;
  }
  100% {
    top: 10%;
  }
}

To define an animation, you need to use the @keyframes rule, which allows you to define keyframes in the animation process.

The keyframes are set with percentage values, starting from 0% and finishing with 100%. For instance, in our example, the animation will start from top: 90%;, and end with top: 10%;, and after that, it will reset back to 50%.

And, of course, you need to tie the bounce animation with the square (animation-name) and also tell the browser how long you want this animation to last (animation-duration). Here's how you do that:

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
}

A square moving up

How to Add Multiple Keyframes

But as you can see, the square starts from the bottom, moves to the top, and then resets back to the center. That is not exactly a bouncing effect. So, how can we make the square move back down?

To do that, you can set up a third keyframe like this:

@keyframes bounce {
  0% {
    top: 90%;
  }
  50% {
    top: 10%;
  }
  100% {
    top: 90%;
  }
}

This way, the square will start from the bottom (top: 90%;), move to the top (top: 10%;), and then move back down (top: 90%;).

The square moving up and then back down

How to Create a Repeat Animation

There is one problem that still needs to be solved. The animation only plays once. In practice, you might want your animation to repeat several times to create the effect that the square is actually bouncing.

Instead of creating more keyframes, which is not easy, you can define an animation-iteration-count property and specify the number of times you want the animation to repeat.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: 5;
}

The square moving up and down for five times

And if you want the animation to last indefinitely, simply specify infinite.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

How to Use a Timing Function for Smoother Animation

Finally, the bouncing effect started working, but there is still room for improvement. The movement of the square seems a bit unnatural. The bouncing effect would look better if you could smooth out the movement.

This can be achieved with a timing function. By default, the browser will assume a linear timing function, which means the animation will have constant speed from start to end. But you can change that using the animation-timing-function property, like this:

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

By specifying ease-in-out, you are telling the browser to start the animation slowly and also end it gradually. As a result, the entire animation will look a lot smoother.

ease-in-out making the square move smoothly

The Cubic Bezier curve

The value ease-in-out actually represents a mathematical equation called Cubic Bezier. I will spare you the complex mathematical definitions, and you only need to know that the function defines a curve with four control points.

cubic-bezier.com is an online tool that allows you to customize the curve by simply dragging the control points.

A Cubic Bezier curve

The points control the shape of the curve, and the slope of the curve then controls the speed of the animation. For example, the above graph indicates the animation will start slowly, accelerate, and then end smoothly.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.17, 0.67, 0.8, 0.36);
}

In most cases, you don't have to define a customized Cubic Bezier curve. There are several predefined curves that should be enough for most use cases.

ease represents the curve cubic-bezier(0.25, 0.1, 0.25, 1). The animation will start by slowly accelerating and then decelerate to stop.

Cubic Bezier curve for ease

ease-in represents the curve cubic-bezier(0.42, 0, 1, 1). The animation will start smoothly and then stop rather abruptly.

Cubic Bezier curve for ease-in

ease-out represents the curve cubic-bezier(0, 0, 0.58, 1). The animation will start abruptly and then slow down to stop smoothly.

Cubic Bezier curve for ease-out

ease-in-out represents the curve cubic-bezier(0.42, 0, 0.58, 1). The animation will be smooth on both ends.

Cubic Bezier curve for ease-in-out

The steps() function

Besides the smooth curve, you can also specify a stepping function. The function steps() takes two arguments. The first one specifies the number of steps, and the second one sets the point at which the change occurs within the step, either start or end.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(5, start);
}

In this case, the animation will be divided into five steps, and for each step, the change will happen at the beginning of the step.

A demo for the steps function

There are also two shortcuts available for the steps() function. step-start corresponds to steps(1, start), and step-end corresponds to steps(1, end).

How to Combine Multiple Animations

So far, we've covered all the fundamentals you should understand to create CSS animations. And now, it is time to get more creative.

Our previous examples all focused on changing the top property in order to create the bounce effect. You can, in fact, combine multiple properties in one animation. For example, you can create a pulse effect by changing the element's shape and opacity together.

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.ball {
  width: 100px;
  height: 100px;
  background-color: purple;
  border-radius: 50%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  animation: pulse 2s ease-in-out infinite;
}

Also note that the animation properties can be combined into a shortcut, animation.

The pulse effect animation

Other Animation-Related Properties

Besides the animation properties we have discussed so far, there are some miscellaneous properties we should talk about. They can also be useful sometimes.

First of all, there is the animation-direction property, which defines how the animation will be played. The property accepts four different values:

• normal: The animation is played forward.
• reverse: The animation is played backward.
• alternate: The animation is played forward first, then backward. It only works when animation-iteration-count is more than 1.
• alternate-reverse: The animation is played backward first, then forward.

By default, the animation will start playing immediately after the page is loaded. But you can change that with the animation-delay property, which specifies how long you wish to wait before the animation starts.

Lastly, the animation-fill-mode property determines how the element will be displayed before and after the animation is played. By default, the element will not retain any styles from the animation. After the animation stops, the element will reset to normal.

When animation-fill-mode is set to forwards, the element will retain the styles from the last keyframe of the animation after the animation is played.

When set to backwards, the element will take on the styles from the first keyframe of the animation as soon as the animation is played.

When set to both, the element will retain the styles from the first keyframe before the animation starts (behaves like backwards), and it will also retain the styles from the last keyframe after the animation is finished (like forwards).

Conclusion

This tutorial covered everything you need to know to start creating CSS animations using the @keyframes rule.

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

We also went over several animation-related CSS properties:

• animation-duration: Defines how long the animation will last.
• animation-iteration-count: Defines how many times the animation will repeat.
• animation-timing-function: Specifies the timing function, which controls the speed at which the animation is played.
• animation-direction: The direction in which the animation is played.
• animation-delay: The delay before the animation begins.
• animation-fill-mode: Whether or not to retain styles from the animation after it is finished.

For further readings on HTML and CSS, check out this course series -> HTML & CSS: A Practical Guide.

Scroll-based animations are triggered when a user scrolls on a webpage. Recently, I built a Scroll Animation with Framer Motion that moves grids in uneven directions. This project prompted me to write a tutorial about how I did that here on freeCodeCamp.

The Framer Motion library makes it super easy to integrate animations into your React applications. With a few lines of code, you can achieve what might seem like a difficult task.

Today, we are going to build a scroll-triggered animation that rotates, translates, and scales a card (or a container) when the user scrolls.

What We're Building:

Here, as the user scrolls, three things are going to happen:

1. The text Unleash the power of Scroll Animations moves up a little bit.
2. The Frame (the black container which is holding the cards) rotates and aligns perfectly with the page.
3. The cards inside the frame translate up a bit – providing a parallax effect.

All of these actions are achieved with the help of the scrollYProgress value from the useScroll() function from Framer Motion. The scrollYProgress value (more on this later) gives you the progress between 0 to 1, determining where the user currently is on the page.

Let's jump into the code and see how to implement this animation from scratch.

Prerequisites

For this demo, we are going to use:

• Next.js for writing our component
• Tailwind CSS for styling and CSS
• Framer Motion for animations

How to Setup the Project

Setting up the project is pretty simple. Here are the steps you should follow:

First, you'll need to install Next.js if you don't already have it.

Open your terminal and type the following command:

npx create-next-app@latest scroll-animation --typescript --eslint

This will initialize a Next.js application where you can go to the app directly for routes and the components folder to create your components.

We are going to keep it really simple for this demo and add the component in the components folder.

Next you'll need to install Tailwind CSS, which you can do like this:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Now add Tailwind to your project by copying the following file contents into the tailwind.config.ts file which gets created after you run the above step:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now add the following global styles in the globals.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

With these steps completed, you should be able to write the component and add it to your project seamlessly.

Now that we are done with the setup, let's deep dive into the component code that we are going to build.

How to Build the Scroll Component

There's essentially only one main component that we are going to work with. We are calling it Scroll, because why not? Here's the code:

export const Scroll = () => {
  return (
    <div className="flex flex-col bg-white h-screen w-screen">
      <ScrollCore />
    </div>
  );
};
export const ScrollCore = () => {
  return (
    <div className="h-[120vh] p-10 flex items-center justify-center relative ">
      <div
        className="py-40 w-full relative"
      >
        <Header />
        <Card />
      </div>
    </div>
  );
};

export const Header = () => {
  return (
    <div
      className="div max-w-5xl mx-auto text-center"
    >
      <h1 className="text-4xl font-semibold">
        Unleash the power of <br />{' '}
        <span className="text-5xl lg:text-6xl  font-bold mt-1 leading-none">
          Scroll Animations
        </span>
      </h1>
    </div>
  );
};

export const Card = () => {
    // Going to implement later in the blog
};

The Scroll components is the container which contains a ScrollCore component.

The ScrollCore component holds the Header and the Card components:

• The Header is the text component that translates to the top (as we saw in the preview
• The Card component is the Frame that we talked about earlier.

Both of these components are styles with Tailwind CSS. We give a class of h-screen and w-screen to the container, and we want the container to take the entire height and width of the screen.

How to Build the Card Component

The Card component is pretty basic (without the animation) since we are going to render multiple cards inside a container with grids from Tailwind CSS. Here's the code:

import {users} from './users';

export const Card = () => {
  return (
    <div
      style={{
        boxShadow:
          '0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003',
      }}
      className="max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-6 bg-[#222222] rounded-[30px] shadow-2xl"
    >
      <div className="bg-gray-100 h-full w-full rounded-2xl grid grid-cols-2 md:grid-cols-4 gap-4 overflow-hidden p-4">
        {users.map((user, idx) => (
          <div
            key={`user-${idx}`}
            className="bg-white rounded-md cursor-pointer relative"
          >
            <div className="absolute top-2 right-2 rounded-full text-xs font-bold bg-white px-2 py-1">
              {user.badge}
            </div>
            <img
              src={user.image}
              className="rounded-tr-md rounded-tl-md text-sm "
            />
            <div className="p-4">
              <h1 className="font-semibold text-sm ">{user.name}</h1>
              <h2 className=" text-gray-500 text-xs ">{user.designation}</h2>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

Here, we are giving a box shadow which I have taken from Box shadows for Tailwind CSS. Also we are giving it a background of #22222. In tailwind, we can use arbitrary values using the [] notation. For example, we have given the class bg-[#22222] for the background.

We are also using a users array to render out a list of users. The user array looks something like this:

export const users = [
  {
    name: 'Manu Arora',
    designation: 'Founder, Algochurn',
    image: 'https://picsum.photos/id/10/300/300',
    badge: 'Mentor',
  },
  {
    name: 'Sarah Singh',
    designation: "Founder, Sarah's Kitchen",
    image: 'https://picsum.photos/id/11/300/300',
    badge: 'Mentor',
  },
  // Rest of the users...
];

Here, we are rendering out the user's name, designation, image, and badge.

Now we're done with the basic cards and header design, so we can move on to animating these using Framer Motion.

How to Add the Animation Functions

Framer Motion provides helpful functions that you can use to animate anything on a webpage. Some of the use cases of these animations might be:

• Animate when the user drags and drops
• Animate when the user scrolls
• Animate when the user clicks or hovers
• Animate on page load

In this demo, we want to animate on scroll. For that, we can use the useScroll() function provided by Framer Motion.

To animate using scroll, we are going to:

1. Get scrollYProgress from useScroll() method
2. Use the useTransform hook to transform scrollYProgress values
3. Use the transformed values to animate our cards.

Let's take a look at the code snippet for the same:

import { useScroll, useTransform, motion } from 'framer-motion';

import { users } from './users';

export const Scroll = () => {
  return (
    <div className="flex flex-col bg-white h-screen w-screen">
      <ScrollCore />
    </div>
  );
};
export const ScrollCore = () => {
  const { scrollYProgress } = useScroll();

  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
  const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);

  return (
    <div className="h-[120vh] transform scale-[0.8] p-10 flex items-center justify-center relative ">
      <div
        className="py-40 w-full relative"
        style={{
          perspective: '1000px',
        }}
      >
        <Header />
        <Card />
      </div>
    </div>
  );
};
// rest of the code

Let's break down what's happening in the code:

We are using the scrollYProgress value from the useScroll() function. This scrollYProgress is a motion value which we can use with motion.div from Framer Motion to animate various CSS properties. The CSS properties we are going to animate are rotate, scale and translate.

We combine these scrollYProgress values with another hook from framer-motion which is useTransform.

The useTransform hook is responsible from converting one value to another. For example, if we want to rotate the card from 45 degrees to 90 degrees when the user scrolls from the top of the page to bottom of the page, we could use something like this:

 const rotate = useTransform(scrollYProgress, [0, 1], [45, 90]);

This rotate value can now be passed to the style tag of a motion.div element. Remember that a regular a div cannot be used here since rotate is a MOTION VALUE and should be used with a motion.div element.

Similarly, we are going to add all the values for rotate, scale and translate like this:

const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);

Here:

1. When a user scrolls from top to bottom (0 is starting, 1 is ending, meaning the user has scrolled from top to bottom), we want to rotate the card from 20 degrees to 0 degrees. But here's a catch: we also specify the perspective property and set it to 800px so that it gives a 3D effect.
2. We want the scale to go from 1.05 to 1 when the user scrolls.
3. And finally we want to translate the cards from 0 to -100 px in the Y direction (later on how we are going to animate the Y direction).

Now that we have all the animations setup, we just need to pass these values to the components' style tags and get the animations working.

How to Add the Animations

We saw earlier how we use the useScroll() hook to get scroll progress and get the rotate, scale and translate values (these values are called motion values, because they can only be used with a motion.div block). Now it's time to actually use these values within our component.

We can do this by passing down the rotate, scale and translate values to the Header and Card component and using them in their respective style tags.

Let's have a look at the code snippet to understand it better:

import { useScroll, useTransform, motion } from 'framer-motion';

import { users } from './users';

export const Scroll = () => {
  return (
    <div className="flex flex-col bg-white h-screen w-screen">
      <ScrollCore />
    </div>
  );
};
export const ScrollCore = () => {
  const { scrollYProgress } = useScroll();

  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
  const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);

  return (
    <div className="h-[120vh] transform scale-[0.8] p-10 flex items-center justify-center relative ">
      <div
        className="py-40 w-full relative"
        style={{
          perspective: '1000px',
        }}
      >
        <Header translate={translate} />
        <Card rotate={rotate} translate={translate} scale={scale} />
      </div>
    </div>
  );
};
// rest of the code

Here, we are passing down the translate, rotate, and scale values inside the components:

<Header translate={translate} />
<Card rotate={rotate} translate={translate} scale={scale} />

• For Header, we only want to translate the text from bottom to top a bit (sort of giving a parallax effect)
• For Card, we want to do a bit more with rotation and translation.

Here's the code for the Header component:

export const Header = ({ translate }: any) => {
  return (
    <motion.div
      style={{
        translateY: translate,
      }}
      className="div max-w-5xl mx-auto text-center"
    >
      <h1 className="text-4xl font-semibold">
        Unleash the power of <br />{' '}
        <span className="text-5xl lg:text-6xl  font-bold mt-1 leading-none">
          Scroll Animations
        </span>
      </h1>
    </motion.div>
  );
};

Here, we converted the div to motion.div so that it can accept motion values.

We also animated the translateY property given by Framer Motion and added the translate value. Remember, translate goes from 0 to -100.

And that is it to animate the text. Essentially for the Header component, we have written just three lines of code to animate it. Pretty cool, huh?

Here's the code for the Card component:

export const Card = ({
  rotate,
  scale,
  translate,
}: {
  rotate: any;
  scale: any;
  translate: any;
}) => {
  return (
    <motion.div
      style={{
        rotateX: rotate, // rotate in X-axis
        scale,
        boxShadow:
          '0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003',
      }}
      className="max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-6 bg-[#222222] rounded-[30px] shadow-2xl"
    >
      <div className="bg-gray-100 h-full w-full rounded-2xl grid grid-cols-2 md:grid-cols-4 gap-4 overflow-hidden p-4">
        {users.map((user, idx) => (
          <motion.div
            key={`user-${idx}`}
            className="bg-white rounded-md cursor-pointer relative"
            style={{ translateY: translate }}
            whileHover={{
              boxShadow:
                '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
            }}
          >
            <div className="absolute top-2 right-2 rounded-full text-xs font-bold bg-white px-2 py-1">
              {user.badge}
            </div>
            <img
              src={user.image}
              className="rounded-tr-md rounded-tl-md text-sm "
            />
            <div className="p-4">
              <h1 className="font-semibold text-sm ">{user.name}</h1>
              <h2 className=" text-gray-500 text-xs ">{user.designation}</h2>
            </div>
          </motion.div>
        ))}
      </div>
    </motion.div>
  );
};

This is the same code as before with just one difference: the div is now converted to a motion.div to accept values wherever required. Here, we want the cards inside of the container to translate, and the entire card itself to rotate.

From the code above, let's look at this part closely:

<motion.div
      style={{
        rotateX: rotate, // rotate in X-axis
        scale,
        boxShadow:
          '0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003',
      }}
      className="max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-6 bg-[#222222] rounded-[30px] shadow-2xl"
    >
    // rest of the code...
</motion.div>

Here, we want to:

1. rotateX so that it goes from giving an illusion of lying flat on the screen to standing straight. (Remember, as the user scrolls, the value goes from 20deg to 0deg.)
2. The scale of the container (or the frame) is also animated to go from 1.05 to 1.

Let's look at the cards inside this frame now:

{users.map((user, idx) => (
          <motion.div
            key={`user-${idx}`}
            className="bg-white rounded-md cursor-pointer relative"
            style={{ translateY: translate }}
            whileHover={{
              boxShadow:
                '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
            }}
          >
            <div className="absolute top-2 right-2 rounded-full text-xs font-bold bg-white px-2 py-1">
              {user.badge}
            </div>
            <img
              src={user.image}
              className="rounded-tr-md rounded-tl-md text-sm "
            />
            <div className="p-4">
              <h1 className="font-semibold text-sm ">{user.name}</h1>
              <h2 className=" text-gray-500 text-xs ">{user.designation}</h2>
            </div>
          </motion.div>
        ))}

Here, the translateY property is animated and the div is converted to a motion.div.

And that's it. That's all it takes to animate on scroll using Framer Motion.

Conclusion

In this tutorial, you learned how to animate using Framer Motion. Essentially, we looked at two core functions:

• useScroll()
• useTransform()

There are other functions you can use which can help you achieve your animation goals. But I believe Framer Motion is a really simple animation API to work with, given its intuitive functions and ease of use.

Here's the complete source code for the demo.

I've created various other demos like this Parallax Effect Using Tailwind CSS and Framer Motion which essentially uses the same pattern that we discussed in this guide.

If you liked this demo and want me to create more of these cool Tailwind CSS and Framer motion components, let me know on Twitter and I'd be more than happy to work on it. :)

Happy coding ✨

Two popular methods for creating web animations are Cascading Style Sheets (CSS) and JavaScript. Each of these techniques has its strengths and use cases, and understanding when to use one over the other is crucial for web developers.

In this article, we will explore the key differences between CSS and JavaScript animations, provide code examples, and guide you on when to choose one over the other.

CSS Animations

CSS (Cascading Style Sheets) is commonly used for styling web pages. But it also provides a powerful and straightforward way to create animations.

CSS animations are primarily used for simple, declarative animations like transitions, keyframes, and transformations.

CSS Transition Example

First, let's look at an example of a simple CSS transition:

.button {
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #3498db;
}

In the above example, the background color of the button will smoothly transition to a new color when a user hovers over it. This is achieved using the transition property.

Let's learn a bit more about how the transition property works:

• background-color: This is the CSS property being animated. In this case, it's the background color of the button.
• 0.3s: This is the duration of the animation. It specifies how long the transition takes to complete (0.3 seconds in this example).
• ease-in-out: This is the timing function that controls the animation's speed curve. It starts slow, speeds up in the middle, and slows down at the end.
• 0s: This is the delay before the animation starts (in this case, there is no delay).

Keyframes Example

Keyframes are another type of CSS animation you can use to style your elements. Here's an example of one in action:

@keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        .element {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            animation: pulse 2s ease-in-out infinite;
        }

Result:

<!DOCTYPE html>

In this example:

• We define a @keyframes rule named "pulse" that specifies three keyframes at 0%, 50%, and 100% of the animation duration. It uses the transform property to scale the element.
• The .element CSS class sets the initial background color, and it applies the "pulse" animation with a 2-second duration, "ease-in-out" timing function, and the "infinite" value, which means the animation will loop indefinitely.
• Inside the <body>, there's a <div> element with the class "element" that will undergo the "pulse" animation when the page loads.

When you open this HTML file in a web browser, the element will pulse or "breathe" by smoothly scaling up and down in size, creating a simple but eye-catching animation.

Other CSS Animation Techniques:

There are other CSS animation techniques, including:

• Transformations: CSS can be used to perform 2D and 3D transformations like scaling, rotating, and translating elements.
• Keyframes: As shown in the above example, keyframes allow you to create more complex animations by specifying multiple steps or keyframes in an animation sequence.
• Other types of CSS Transitions: Besides property-based transitions, you can also use transitions for multiple properties, allowing you to create more intricate animations.

Advantages of CSS Animations

• Easy to Use: CSS animations are relatively simple to implement, especially for basic animations like transitions and fades.
• Performance: They are hardware-accelerated and generally perform well, providing a smooth user experience.
• Responsive Design: CSS animations are inherently responsive and adapt to different screen sizes and devices.
• Low JavaScript Overhead: Using CSS for animations can reduce the load on JavaScript, making your web application more efficient.
• Browser Compatibility: CSS animations are widely supported in modern browsers. But it's important to note that there can be compatibility issues with older versions of Internet Explorer (IE) and some mobile browsers. In such cases, it may be necessary to provide graceful degradation or alternative designs for users on older browsers.

JavaScript Animations

JavaScript is a versatile programming language used for a wide range of tasks, including creating complex animations. JavaScript animations are typically more flexible and capable of handling intricate, data-driven animations.

JS Animations using the requestAnimationFrame method

     const box = document.getElementById('animated-box');
        let isAnimating = false;

        box.addEventListener('click', () => {
            if (!isAnimating) {
                isAnimating = true;
                box.style.transform = 'translateX(200px)';

                setTimeout(() => {
                    isAnimating = false;
                    box.style.transform = 'translateX(0)';
                }, 1000);
            }
        });

Result:

<!DOCTYPE html>

In the JavaScript animation example, the requestAnimationFrame method is used to create a simple animation where a box moves horizontally when clicked. This method is often used for smoother, more complex animations.

In this example,

• We use document.getElementById('animated-box') to select the HTML element with the ID "animated-box" and assign it to the box variable.
• We also declare a boolean variable isAnimating to keep track of whether an animation is currently in progress.
• We add an event listener to the box element that listens for a click event.
• When the box is clicked, the event listener triggers an anonymous function that checks if an animation is already in progress (isAnimating). If not, it sets isAnimating to true.
• It then changes the transform property of the box to translateX(200px). This shifts the box 200 pixels to the right, creating a horizontal animation effect.
• After a 1-second delay (specified by setTimeout), it sets isAnimating back to false and resets the transform property to its original state (translateX(0)), moving the box back to its initial position.

This code creates a simple animation where clicking the box moves it horizontally to the right and then back to its original position, all within the duration of 1 second. The CSS transition property ensures that the movement is smooth and visually appealing.

Other common JavaScript animation methods

• jQuery: jQuery is a popular JavaScript library that simplifies animation tasks, making it easier to create animations with less code.
• GreenSock Animation Platform (GSAP): GSAP is a robust animation library for JavaScript that provides advanced animation capabilities and precise control over animations.
• Canvas Animation: HTML5 canvas can be used to create custom animations, especially for games and visualizations.
• Web Animation API: This native browser API provides a JavaScript interface for controlling animations on web pages, allowing for greater control over animations compared to CSS.
• SVG Animations: You can create complex animations within Scalable Vector Graphics (SVG) using JavaScript to manipulate SVG elements.

Advantages of JavaScript Animations

• Complex Animations: JavaScript offers greater flexibility, making it suitable for complex animations with dynamic behavior.
• Interactivity: You can easily add user interactions, such as drag-and-drop functionality, through JavaScript animations.
• Data-Driven Animations: JavaScript allows you to create animations based on data, making it ideal for visualizing dynamic content.
• Real-Time Updates: JavaScript animations can be used for real-time updates and synchronized animations with other parts of the web application.
• Performance Implications: JavaScript animations can sometimes be resource-intensive, especially on mobile devices or less powerful hardware. Developers should be cautious when implementing complex JavaScript animations on these platforms to ensure a smooth user experience.

When to Use CSS vs JavaScript for Animations

When to Use CSS for Animations:

CSS if often the best choice for basic animations like hover effects, transitions, and small, non-interactive animations.

CSS animations are generally smoother and more efficient, making them ideal for performance-critical scenarios.

And when you're designing responsive websites, CSS animations adapt to different screen sizes seamlessly.

When to Use JavaScript for Animations:

On the other hand, when you need to create intricate animations with dynamic elements, JavaScript provides the necessary flexibility and control.

Also, if your animations need to respond to user interactions, JavaScript animations should be your go-to option.

JavaScript is also essential for creating interactive charts and graphs for data-driven animations.

And finally, when you require real-time updates or synchronized animations, JavaScript is the best choice for dynamic content.

How to Combine CSS and JavaScript Animations

In some scenarios, a hybrid approach using both CSS and JavaScript animations can offer the best of both worlds.

For instance, you might use CSS for initial animations and transitions that occur when a page loads and then employ JavaScript for user interactions, real-time updates, or data-driven animations. This combination can provide the efficiency and performance benefits of CSS with the interactivity and dynamic capabilities of JavaScript.

Check out the following Codepen for an example:

Conclusion

Web animations are a crucial element of modern web development, enhancing user experience and engagement.

The choice between CSS and JavaScript for animations depends on the complexity of your project, the level of interactivity required, and your performance needs.

For simple and performance-critical animations, CSS is often the best choice, while JavaScript is the go-to option for complex, interactive, and data-driven animations.

Remember that in many cases, a combination of both CSS and JavaScript can be the most effective approach. By understanding the strengths of each technique and when to apply them, you can create web animations that captivate your audience and elevate your web development projects.

I’m also a big fan of the Vue.js framework, and I’ve been building apps with it for three years.

So it was a delightful surprise when I realized that I could use only the Transition API in Vue.js while leveraging my decent CSS skills to animate a component’s enter and exit animations in such a fluid manner.

How fluid, you might ask? Let me show you:

In this article, we'll build a straightforward movie app with built-in filtering features. By the end, you should have a solid understanding of the <Transition> and <TransitionGroup> built-in components in Vue.js and how they seamlessly handle enter and exit animations within Vue.js.

Prerequisites

Hold on! We need a few tools in our toolkit before we dive into this adventure. This article is designed to be a breeze for beginners, but to ensure a smooth ride, here's what you'll need:

• A basic understanding of HTML, CSS, and Javascript.
• A basic understanding of Transitions and Animations in CSS.
• A basic knowledge of the Vue.js framework.
• You can also access the bare movie app without the transitions here, but only if you think it’s the boring part ;)
• Last but not least, some good background music—I’ll let you choose this one yourself, but there's always freeCodeCamp radio.

Ok, now we're ready to get started.

What is the Transition API?

The Transition API primarily consists of the built-in <Transition> and <TransitionGroup> components in Vue.

The <Transition> component is used for animating single elements or components. In contrast, the <TransitionGroup> is used for animating multiple elements in a list in conjunction with the v-for directive in Vue.

How to Add Animations with the <Transition> Component

The <Transition> component is a built-in component that is typically wrapped around any root element or component for animation benefits. The animations are triggered when the inner element or component is shown or hidden using common Vue directives like v-show or v-if.

This component is "built-in" because it does not need to be imported into the template to be functional. It's recognized by the Vue template compiler.

We can try this out by adding a v-show to our .header-filters container first and wrapping the container in the <Transition> component like below:

<Transition>
  <div v-show="filtersVisible" class="header-filters">
    <input type="search" v-model="searchQuery" placeholder="Search Movies">
    <div class="button-group">
      <button @click="query = ''" :class="{ active: query === '' }">Clear Filters</button>
      <button @click="query = '2021'" :class="{ active: query === '2021' }">2021</button>
      <button @click="query = 'Action'" :class="{ active: query === 'Action' }">Action</button>
    </div>
  </div>
</Transition>

We can then wrap up the animation by including styling specifications for the enter and exit animations. If you are familiar with CSS Animations and Transitions, the mode of operation is pretty similar. If you are not, here is a quick crash course.

.v-move,
.v-enter-active,
.v-leave-active {
  transition: 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

And now, you should have your fluid animations for single root elements with the <Transition> component.

Illustration of the effect of the Transition component when an element is hidden and shown.

What if you want something similar to the video that I shared earlier? Something more mesmerizing? Well, let’s see the <TransitionGroup> component.

How to Add List Animations with the <TransitionGroup> Component

The <TransitionGroup> component is wrapped around a list to animate the insertion, removal, and change of order of the items that are rendered in this list. This list is typically created with the v-for directive.

Unlike the <Transition> component, the elements or components wrapped in the <TransitionGroup> component must have unique key attributes.

<TransitionGroup>
  <MovieCard v-for="movie in filteredMovies" :key="movie.title" :movie="movie" />
</TransitionGroup>

Aside from the instructions above, the <TransitionGroup> component has a similar mode of integration and operation as the <Transition> component.

How to Identify and Name Transitions

A common problem when using <Transition> and <TransitionGroup> components is having multiple instances of these components in your app and using different enter and exit transitions for specific instances. This is why we name <Transition> and <TransitionGroup> components.

The <Transition> and <TransitionGroup> components accept a name prop that helps to identify and group transitions.

<TransitionGroup name="list">
  <MovieCard v-for="movie in filteredMovies" :key="movie.title" :movie="movie" />
</TransitionGroup>

The name prop also determines the class name for styling enter and exit transitions like below:

.list-move,
.list-enter-active,
.list-leave-active {
  transition: 0.3s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

Notice that the name prop passed in the <TransitionGroup> code above is “list”, and it is used as a prefix in the styles for enter and exit transitions in the CSS code above.

How to Customize Enter and Exit Animations With CSS

In this article, we used the CSS transition property to help with subtle enter and exit animations. But the <Transition> and <TransitionGroup> components also support the animation property in CSS for much more complex animations with multiple keyframes.

Here is an example of how we can use the animation property in our <Transition> component:

Template

<Transition name="bounce">
  <div v-show="filtersVisible" class="header-filters">
    <input type="search" v-model="searchQuery" placeholder="Search Movies">
    . . .
  </div>
</Transition>

Styles

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

If the concept of keyframes or the animation property in CSS does not make much sense to you, feel free to get a quick introduction to animations in CSS.

Purposeful Motion on the Web

In any discussion about web animations and transitions, it's crucial to address the "why" behind them. Why should we include motion on the web, and is it genuinely indispensable?

Motion on the web serves a purpose that extends far beyond mere aesthetics. It's a powerful tool for conveying messages to your users. Whether it's to elevate your storytelling, provide user feedback, or captivate their attention, animations can play a pivotal role in enhancing your users' experience.

Gone are the days when animations were added merely for decorative purposes. In the modern web landscape, every keyframe should be thoughtfully designed with a clear purpose, and the user should always be at the heart of your design decisions.

That being said, make sure not to overuse animations – as too many moving parts can be distracting and actually detract from the user experience. It's all about balance.

Conclusion

Phew, that was an exciting ride! I hope you enjoyed it. This article shared a lot, and I'm excited to see how you use that information. I would love to know if you built something cool while reading.

Also feel free to look into the official Vue documentation to see what else is possible with the Transition API.

Finally, have fun creating delightful experiences with animation, but always remember CSS animations are only useful to your users when they are purposeful. If you found this article helpful, feel free to connect on favourfelix.com to see what else I'm up to.

Getting familiar with these concepts can help you make sure your upcoming React.js applications stand out.

🔐 Here's What We'll Cover:

• Crafting a Blender model, encompassing animations, materials and the export process.
• Building a React.js application integrated with Three.js via React Three Fiber.
• Incorporating your personally created Blender model into the React.js application.

📝 Prerequisites:

• A fundamental grasp of the 3D software Blender is recommended.
• Basic familiarity with React.js is required.
• Prior experience with Three.js is not necessary.

Table of Contents

1. 💭 What are Three.js and Blender?
2. 🔧 How to Set Up React.js with Three.js
3. 🔨 How to Create a Blender Model
4. ✏️ Texture Baking for Procedural Materials
5. ✒️ How to Implement the Blender Model into the React.js Application
6. 📄 Additional information
7. 📋 Wrap-up

💭 What are Three.js and Blender?

Three.js is a JavaScript library that functionas as an API, allowing you to exhibit 3D models within web browsers.

Leveraging Three.js helps you seamlessly integrate interactivity and distinctive functionalities into your website.

Blender is a robust software tailored for crafting and refining 3D models. Its versatility offers boundless opportunities, catering to a wide spectrum of creative visions.

Beyond its display capabilities, Blender provides you with an array of tools encompassing cameras, lighting, and even post-production enhancements.

When used together, these tools facilitate boundless creativity, allowing you to seamlessly translate your artistic creations into your upcoming website project.

🔧 How to Set Up React.js with Three.js

To start the process, install the React.js application:

npx create-react-app my-app

Next, we'll install Three.js and React Three Fiber. React Three Fiber serves as a React renderer for Three.js, harnessing the power of React components to streamline Three.js integration within a React.js environment:

npm install three @react-three/fiber

For an enriched Three.js experience, we'll also integrate React Three Drei, a package that introduces an assortment of helpers for diverse Three.js scenarios, including several camera controls, for example:

npm install @react-three/drei

glTF Tools extension

I also recommend installing the glTF Tools extension. Although not strictly necessary, this extension can help you perform various tasks.

If you're using Visual Studio Code as your Integrated Development Environment (IDE), you can conveniently add the extension through the extensions tab. Again, this extension is optional, but it can significantly simplify certain processes later on. I will use it throughout this tutorial:

gltf Tools extension in Visual Studio Code

Completed setup for Three.js in React.js

The dependencies in the package.json file of our React.js application now appear as follows:

"dependencies": {
    "@react-three/drei": "^9.80.2",
    "@react-three/fiber": "^8.13.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "three": "^0.155.0",
    "web-vitals": "^2.1.4"
  },

These dependencies are sufficient for accomplishing a variety of tasks with Three.js in a React.js environment. Of course, you can incorporate any additional libraries you may desire for purposes beyond Three.js integration.

In addition to this, I have also made the code from this tutorial available on GitHub. This will allow you to quickly access the information without having to scroll through the entire article.

🔨 How to Create a Blender Model

To begin, our initial task involves creating a Blender model that will then be integrated into our React.js application. For this stage, let's consider a scene in the Layout tab where we've got three objects: two spheres and one plane. You can add such objects with the Shift + A shortcut in Blender.

Blender scene with two spheres and one plane in the Layout tab

This composition includes just a plane and two spheres, with no additional details. Of course, you can work on more elaborate scene and model designs according to your preferences.

But for the purpose of illustrating the fundamental process of incorporating your custom Blender models into React.js, this basic example will serve us just fine.

How to add animations to the model

Now, our focus shifts to introducing basic animations to all three objects within this Blender scene. These animations can facilitate movement, rotation, or even adjustments in scale for the objects, enabling dynamic transformations.

In order to add animations in Blender for your objects, you can switch to the Animation tab, next to the Shading and Rendering tab.

In the Animation tab, you can add points to a certain frame. For instance, if you want to shift a sphere a bit to the left, begin by adding a starting keyframe (right-click on the object, choose "Insert Keyframe," then pick "Location").

Afterward, move ahead a few frames on the object's animation timeline, adjust the object's position, and repeat the same process. This way, you'll have two keyframes: the initial one and the new position.

Remember, this motion is in one direction. If you want to repeat the animation, it will move to the new location and then return to its initial position with a jump.

To make the movement smoother, you can copy the initial keyframe and insert it at the end. This will make the object move back with a smooth motion after reaching the new location. This is also how I set up the keyframes in our Blender model.

Of course, you can add more keyframes to make more complex animations. This is just a basic introduction to starting with Blender animations. Like many aspects of Blender, there's a lot more to explore and learn.

Adding animations to all three objects in the Animation tab

In this context, it's not necessary to have a thorough understanding of the specifics of these animations we added here. So, you don't really need to know to which exact position the first sphere is being moved through the animation.

The key point is to acknowledge their presence, as they will be integrated into our React.js application at a later stage so we can activate them in the browser.

How to add colors

Moving forward, we'll add some simple colors for the small sphere and the underlying plane, which you can do within the Shading tab, for example.

For basic colors, you can also go to the Material Properties section of the object (right-click on the object, then choose the second-to-last category at the bottom). But I want to focus on a specific situation you might encounter with your models later on. Therefore, I'll exclusively use the Shading tab for setting object colors in this tutorial.

In the Shading tab, you can add nodes at the bottom of the screen. These nodes can modify the color and texture of an object, among other things. You'll also find Vector and Shader nodes that, when combined, can create unique visuals for your objects.

All these adjustments apply to a specific material. So, if you want the same visual for different objects, you can simply apply the same material to them.

The Principled BSDF and Material Output nodes are initially generated when we open the Shading tab to look up on of our object's material for the first time. Both nodes are pretty much the basic case.

The Principled BSDF has a lot of settings you can play around with. In our case we just want to change the Base Color property to a blue color.

Material of one sphere where we just adjust the Base Color within the Principled BSDF node

For the larger sphere, a similar material application is used. But, in contrast to the Principled BSDF node, we'll use the Glossy BSDF node which is such a node from the Shader category. This will help us recognize a possible issue that you might come across when designing a Blender model for your React.js application – which you will see later on.

Using the Glossy BSDF node to add a material to the large sphere

Once we've done this, we're ready to export our Blender model. Note that this version is considerably simplified. You can work on more detailed model designs tailored to your preferences. Still, the overall workflow remains similar.

How to export the model

To export the model, we need to generate a .glb/.gltf file. This is crucial as Three.js expects particular file formats for compatibility, and in this instance, a .glb or .gltf file aligns with the library's requirements.

So, once you've finished creating your model with objects, animations, colors, and more, you can do the following:

1. Click on the File tab located at the top left corner.
2. Choose Export from the options that appear. Now, a variety of export formats will be shown.
3. If you plan to use your model with Three.js in your application, you need to pick the glTF 2.0 (.glb/.gltf) option, like I mentioned earlier.

After selecting this option, a new window will pop up. This window lets you pick the folder where you want to save your file.

On the right side of this window, there are additional choices. You can decide which specific objects you want to export, for instance. In most situations, the default settings should work well. Just remember that you can adjust these settings to your liking if necessary.

Remember to export with the glTF 2.0 (.glb/.gltf) format.

How to visualize the exported model

Next, let's transition to Visual Studio Code and navigate to the folder where we've stored our exported file.

Within this directory, you'll find a .glb file. Referring back to the glTF Tools extension setup from earlier, you can simply right-click on the .glb file in order to find two additional options positioned at the bottom, called glTF: Import from GLB and glTF: Validate a GLB or GLTF file.

In this scenario, we'll opt for the glTF: Import from GLB option. This action will generate a .gltf file in the same folder, in our case blenderFile.gltf.

Generating a .gltf file from the original .glb file we exported in Blender with the glTF Tools extension

We've chosen this approach to bring enhanced accessibility to the .gltf file, enabling direct viewing within Visual Studio Code through the glTF Tools extension. This can be quite helpful to check on your file prior to its actual implementation.

If we access the newly created .gltf file, we can observe a bunch of information based on the Blender model. It's important to note that the specifics could differ in your case, as they're tailored to reflect the attributes of the objects and scenes within your Blender project.

If we look at the upper-right corner, there is a symbol that looks like a cube with a cone next to it. By clicking on this symbol, you can seamlessly preview your Blender scene directly within your IDE. This functionality is exclusively accessible for the .gltf file and not applicable to the .glb file in this case.

The newly created .gltf file with the option to view the model directly in Visual Studio Code (in the upper-right corner, circled in red)

It's worth noting that you don't have to do this through the glTF Tools extension. Alternatively, various websites allow you to upload your file for visualization. But I've personally found this in-IDE approach to be especially convenient. It centralizes the process, enabling you to assess your file's integrity before actually implementing it.

If you find any errors, this practice lets you preemptively find out whether the issue is based on a problematic file export or just an implementation oversight within your React.js application. Consequently, I wholeheartedly recommend evaluating your model file following its export from Blender.

Viewing the Blender model with glTF Tools in Visual Studio Code

By using the glTF Tools extension to view our Blender model in Visual Studio Code, we can see that all three objects are correctly recognized. Both the small sphere and the plane are shown in their intended colors.

But the large sphere doesn't have the expected color assigned and just appears with a default white color instead.

This discrepancy raises the question: what led to this anomaly? It's circumstances like this that demonstrate how useful it is to preview your model before integrating it into your React.js application.

By scrutinizing your model at this stage, you can affirm that the issue originates from the Blender model itself rather than the implementation process, given that we haven't done any implementation yet.

This pre-implementation assessment proves to be handy and enables you to diagnose and address potential complications before proceeding with the implementation process in React.js.

✏️ Texture Baking for Procedural Materials

In a nutshell, Blender provides the flexibility to employ procedural nodes for your materials. While these nodes function seamlessly within Blender, they are not directly compatible with other game engines or software frameworks such as Three.js.

To learn more, consider watching the following video. In just 10 minutes, it demonstrates the process of texture baking, which effectively resolves the issue at hand.

Personally, when confronted with this challenge and initially uncertain about its nature, I found this video to be a valuable resource for gaining deeper insights into the subject matter.

In our specific scenario, while we might not encounter as complex a situation as seen in the video, we are still faced with the use of nodes that lack direct compatibility with various software tools.

Next, we'll briefly walk through the steps mentioned in the video. However, if you're interested in delving deeper into this process, I highly recommend watching the video.

How to create an image texture node

To start, in the Shading tab for the material containing the Glossy BSDF node, we'll introduce an Image Texture node and connect it to a new image (by click on New).

We'll leave the settings at their default values, which means a width and height of 1024px. Using larger values would considerably extend the processing time we're going to face. Still, it's important to note that a larger texture can offer more detail and an overall improved appearance.

In our current situation, we're aiming for a quick process. But for more significant projects, visual quality might be crucial. In such cases, opting for a higher resolution could be desirable.

Creating an Image Texture node and assigning a new image to it with default settings

How to apply the Smart UV Project process

Next, we need to employ the Smart UV Project option located in the UV Editing tab. Essentially, this action unwraps the faces of the particular object onto a texture.

This process enables us to specify which parts of the texture should be colored and modified as soon as we are back in the Shading tab. To make this process effective, we must select all the faces of the large sphere.

Selecting all faces of the object in the UV Editing tab and applying Smart UV Project on it

Once we've finished this step and utilized the default settings for the Smart UV Project procedure, the image on the left —previously featuring a grid— will now display the shapes of the sphere we applied this process to. In our situation, it seems like the texture captured various angles of our sphere.

The texture after Smart UV Project

Depending on the specific object, you may need to fine-tune the settings presented after clicking the Smart UV Project button. If you encounter challenges with a particular object, the video I shared earlier can give you additional guidance on this aspect.

Generally, to mitigate issues, you should optimize your object layout during its creation phase. Avoiding the introduction of excessive edges in specific locations can prevent problems like clipping, for instance.

The Bake process

Now, let's return to the Shading tab, where we'll access the Render Properties on the right side (represented by the small screen or TV symbol). If not already selected, pick Cycles as your Render Engine. Then navigate to the Bake category, which is located below the Performance category.

Bake option in the Shading tab within the Render Properties

With the existing default settings, you can proceed by clicking the Bake button while ensuring that both the Image Texture node and the large sphere are selected.

Keep in mind that I integrated a Sun light into my scene, as this bake process takes the scene's lighting into account. Without sufficient lighting, the result might appear excessively dark.

After a period of processing (which might be more time-consuming if you've employed larger dimensions for the Image Texture node's image), the baking process will finish. This results in the texture being applied to the image from the Image Texture. Instead of obtaining the texture from the Shader node named Glossy BSDF, we now have access to it through a regular "normal" image texture.

Then we can establish a connection from the Image Texture node to the Material Output node, thereby successfully implementing our material. At this stage, there isn't a significant difference compared to the previous method where we had the Principled BSDF node connected to the Surface input of the Material Output node.

Image Texture node with the "baked" texture is connected with the Material Output node instead of the Glossy BSDF node

How to see the final result

Now, we can export the file again, repeat the same process from before in our IDE with glTF Tools and view the .gltf file with the extension. Upon examining the outcome, you might notice that it's not an exact match to the version we had using the Glossy BSDF node in Blender. This difference can be primarily attributed to the lighting conditions in the Blender scene.

Bear in mind that the approach I've outlined isn't the typical usage for the baking process, since in this case you could also just have picked a similar base color with the Principled BSDF node and would achieve pretty much the same solution, for example.

Finalized view with glTF Tools, including the "baked" texture for the large sphere

I introduced the baking process based on personal experience. There were instances where I encountered a scenario where materials appeared differently in Blender compared to when implemented them in a React.js application with Three.js. This situation prompted me to explore the concept of baking, which turned out to be a helpful solution.

To summarize, if you find yourself facing a scenario where your materials don't appear as expected in your React.js application with Three.js, considering the baking process and researching this topic can provide valuable insights. This can be particularly beneficial for people who are new to Blender.

✒️ How to Implement the Blender model in the React.js Application

To implement the Blender file, we can use a really useful shortcut (source: https://github.com/pmndrs/gltfjsx):

npx gltfjsx public/blenderFileName.glb

It's important to note that you need to store your Blender file within the public folder of your React.js application for this step. It's also worth highlighting that you need React Three Drei to use this helper. So in our case, we can directly use this shortcut without the need for any additional preparations.

Upon executing this shortcut, we are presented with the following file:

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.1.4 public/blenderStuff/blenderFile.glb
*/

import { useLayoutEffect, useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";

export function Model(props) {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF(
    "./blenderStuff/blenderFile.glb"
  );
  const { actions } = useAnimations(animations, group);

  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <mesh
          name="Cube"
          geometry={nodes.Cube.geometry}
          material={materials.Material}
          position={[-0.07, 0.16, -0.27]}
          scale={[1, 0.03, 1]}
        />
        <mesh
          name="Sphere"
          geometry={nodes.Sphere.geometry}
          material={materials["Material.002"]}
          position={[-0.62, 0.43, -0.79]}
          rotation={[-0.01, 0.11, -0.02]}
          scale={0.09}
        />
        <mesh
          name="Sphere001"
          geometry={nodes.Sphere001.geometry}
          material={materials["Material.001"]}
          position={[0.4, 0.55, 0.15]}
          scale={0.41}
        />
      </group>
    </group>
  );
}

useGLTF.preload("./blenderStuff/blenderFile.glb");

At first glance, you can see that this process has added many elements, so we basically don't need to add much on our own.

An important aspect to configure is the path within the useGLTF hook. In my instance, the accurate path to incorporate is ./blenderStuff/blenderFile.glb (this applies to useGLTF.preload() as well). This is because I created a sub-folder named blenderStuff within my public directory.

How to add a Canvas wrapper and other components

With this configuration in place, we're now ready to use the Model component. But to effectively integrate this Model component into our desired location, we need to make some adjustments in the parent component.

In my case, I've opted to implement it within the main App.js file. And I've assigned a height of 100vh to the App's CSS class to ensure the desired display.

import "./App.css";
import { Model } from "./BlenderFile";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

function App() {
  return (
    <div className="App">
      <Canvas camera={{ fov: 64, position: [-2, 2, 0] }}>
        <ambientLight intensity={5} />
        <OrbitControls enableZoom={true} />
        <Model />
      </Canvas>
    </div>
  );
}

export default App;

Generally speaking, you'll need a component to encapsulate all the Three.js related elements. Within the Canvas component, there's an opportunity to configure various settings. In my specific instance, I'm adjusting the initial camera position.

The light for the component plays a crucial role. In our case we made use of ambientLight which will add a light to the whole scene. Without adequate lighting, your scene might appear exceedingly dark or even entirely black despite the presence of object colors. You can also use additional light sources like the spotLight component.

The OrbitControls component, accessible from the Drei helper library, enhances your interactivity by enabling scrolling and rotation within the model right within the browser. This single line of code substantially improves user interactivity options.

Remember that your Canvas component can accommodate multiple models. You can also selectively apply components like OrbitControls to specific Blender models, thereby tailoring their behavior.

To do this, you'll need to build a parent component for each scene you want to make to be integrated within the Canvas. Within each new parent component, incorporate your Blender model component, along with any supplementary helper components you want to add.

This approach proves particularly advantageous when distinct models require different lighting or unique camera positions, for example.

How to implement the animations

At this point, we've established a functional Three.js Canvas environment, featuring our Blender model. But it's important to remember that we've also introduced basic animations, which are not yet operational.

To tackle this, we can leverage the pre-implemented useAnimations hook.

  const { actions, names } = useAnimations(animations, group);

  useLayoutEffect(() => {
    names.forEach((animation) => {
      actions?.[animation]?.play();
    });
  }, [actions, names]);

By incorporating this implementation, all animations associated with this Blender model will start playing upon the rendering of the page. This behavior also includes an indefinite loop for each animation.

📄 Additional Information

While this tutorial primarily focused on integrating a Blender model into a React.js application using Three.js, there's a realm of untapped potential within Three.js that we didn't cover.

Although we didn't use it in this basic example, you can introduce Post Processing to your Three.js models within React.js. The React Three Postprocessing library serves as a valuable tool in this regard. It lets you elevate your Three.js scenes with sophisticated effects like Bloom or Noise effects, which can add a more advanced dimension to your visualizations.

Also, when working on future Three.js projects, consider exploring the React Spring library which integrates well with React Three Fiber. React Spring provides the opportunity to incorporate custom animations within your Three.js scenes, on top of any animations directly integrated within Blender.

For instance, you could make a specific object within your scene get larger or smaller upon clicking it. As with other aspects of Three.js, this aspect might enhance interactivity and might be worth your time to get into.

By the way, if you find that your frames are running at a lower rate, consider toggling Hardware Acceleration within your browser settings to potentially improve performance.

📋 Wrap-up

At this point, we've successfully crafted a Blender model with animations and materials. Afterwards we integrated it into our React.js application using React Three Fiber.

Although the example we looked at here was quite basic, the integration approach remains the same for more complex Blender models. The fundamental functions of Three.js can be combined with supplementary helpers to enhance your scenes.

In addition to Post Processing, additional animations or also specific Blender materials, aspects like cameras and lights often are the most important when aiming to enhance the visual impact of your Blender models within Three.js scenes.

A while ago, I saw a post on Twitter that had some fancy beams of light emanating out from behind the main image. It looked like a meteor was blazing softly behind the card, and I thought it was a really cool UI component to have in a project.

Looking at that, I thought of creating a React component of my own that would do the same job – that is, adding this meteor glowing effect to the background of a card.

This would make the card stand out instantly and would be really useful if you wanted to highlight a specific card from your set of UI cards.

So that's what we're going to build in this tutorial.

Prerequisites

For creating this effect, we are going to use:

• Next.js for our framework (because we are going to create a component)
• TailwindCSS for styling

How to Setup the Project

To setup a project in Next.js and TailwindCSS, simply follow these steps:

First, head over to the terminal and enter the following command:

npx create-next-app@latest meteor-effect --typescript --eslint

Once you have Next.js installed, cd into the project like this:

cd meteor-effect

Then install TailwindCSS like this:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Setup the tailwind.config.js file so that Tailwind knows where to find your styles:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Once you've setup the config file, add the base styles for Tailwind to the global stylesheet like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

With these steps, you should be good to go.

What Are We Building?

the cool lines at the background are meteors

A Meteor (as I call it, you can call it anything really) is basically a UI element with a head and a tail. It's a sort of beam which has a gradient.

In the image, the background lines are what I call meteors. We are going to animate these lines to go from the left side of the card container to the right side, giving an illusion of a meteor shower.

We are going to build:

• A beautiful Card Component
• A Meteor component to add to the card

But before we build the core Meteor component, let's create the container that holds the meteors.

How to Create the Card Container

The card container we'll build here

Before we create the Meteor component, let's first create the Container that will hold down our meteors.

The Card Container has four parts to it:

• An SVG icon
• A headline
• Content Section
• Call to Action

We are going to style this card with TailwindCSS and give it a background gradient too so that it looks good.

import React from "react";

export const MeteorPreview = () => {
  return (
    <div className=" h-[40rem]">
      <div className=" h-3/4 md:h-1/2 w-3/4  relative max-w-sm">
        <div className="absolute inset-0 h-full w-full bg-gradient-to-r from-blue-500 to-teal-500 transform scale-[0.80] bg-red-500 rounded-full blur-3xl" />
        <div className="relative shadow-xl bg-gray-900 border border-gray-800  px-4 py-8 h-full overflow-hidden rounded-2xl flex flex-col justify-end items-start">
          <div className="h-5 w-5 rounded-full border flex items-center justify-center mb-4 border-gray-500">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              className="h-2 w-2 text-gray-300"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"
              />
            </svg>
          </div>

          <h1 className="font-bold text-xl text-white mb-0 mt-4 relative z-50">
            Meteors because they're cool
          </h1>

          <p className="font-normal text-base text-slate-500 mb-4 relative z-50">
            I don't know what to write so I'll just paste something cool here.
            One more sentence because lorem ipsum is just unacceptable.
          </p>

          <button className="border px-4 py-1 rounded-lg !text-sm  border-gray-500 text-gray-300">
            Explore &rarr;
          </button>

        </div>
      </div>
    </div>
  );
};

Firstly, we created a container that holds the content of the card. This container contains the following:

• An SVG Icon at the top of the container
• A headline, which is a one liner that shows the purpose of the card
• Some content, which is contained in a paragraph tag explaining the contents of the card
• CTA, which is a button element that takes the user to some other part of the website.

Now that we have the Card component in place (the container), lets create the Meteor component.

How to Build the Meteor Component

Like I explained before, a meteor is nothing but a UI element with a head and a tail that has a gradient. We are going to build exactly that here.

Standalone meteors

Every meteor will have:

• A tail of width of 50px
• A tail height of 1px
• A background gradient (for the tail) which goes from #64748b to transparent
• A head of height and width 2px

import clsx from "clsx";
import React from "react";

export const Meteors = ({ number }: { number?: number }) => {
  const meteors = new Array(number || 20).fill(true);
  return (
    <>
      {meteors.map((el, idx) => (
        <span
          key={"meteor" + idx}
          className={clsx(
            "animate-meteor-effect absolute top-1/2 left-1/2 h-0.5 w-0.5 rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10] rotate-[215deg]",
            "before:content-[''] before:absolute before:top-1/2 before:transform before:-translate-y-[50%] before:w-[50px] before:h-[1px] before:bg-gradient-to-r before:from-[#64748b] before:to-transparent"
          )}
          style={{
            top: 0,
            left: Math.floor(Math.random() * (400 - -400) + -400) + "px",
            animationDelay: Math.random() * (0.8 - 0.2) + 0.2 + "s",
            animationDuration: Math.floor(Math.random() * (10 - 2) + 2) + "s",
          }}
        ></span>
      ))}
    </>
  );
};

Let's understand the Meteor component.

• The Meteor component takes in a prop of numbers. This is created in such a way that if you pass the numbers, the meteors increase. The default is set to 20.
• We create a span element which will essentially be our meteor that goes from left to right.
• the before: class creates a pseudo before element which is essentially the line part of the meteor. We are giving it a linear gradient and a width of 50px.
• The style tag decides where the meteor is currently in the DOM. We are going to use Math.random() to randomly place meteors on the background.
• To actually animate the meteors, we are using the class of animate-meteor-effect. This class is actually added in the tailwind.config.js file to add moving animation.

 theme: {
    extend: {
      animation: {
        "meteor-effect": "meteor 5s linear infinite",
      },
      keyframes: {

        meteor: {
          "0%": { transform: "rotate(215deg) translateX(0)", opacity: 1 },
          "70%": { opacity: 1 },
          "100%": {
            transform: "rotate(215deg) translateX(-500px)",
            opacity: 0,
          },
        },
      },
    },
  },

Here, we are basically moving the beam to negative 500px in a span of 5 seconds. This is what causes the meteor to move from left to right. It also nicely animates the opacity from visible to hidden (when we are 70% of the way through).

How to Use the Meteor Component

Now since we have the Meteor component in place, we can easily embed it into our card component that we created previously:

import React from "react";
import { Meteors } from "./Meteors";

export const MeteorPreview = () => {
  return (
    <div className=" h-[40rem]">
      <div className=" h-3/4 md:h-1/2 w-3/4  relative max-w-sm">
        <div className="absolute inset-0 h-full w-full bg-gradient-to-r from-blue-500 to-teal-500 transform scale-[0.80] bg-red-500 rounded-full blur-3xl" />
        <div className="relative shadow-xl bg-gray-900 border border-gray-800  px-4 py-8 h-full overflow-hidden rounded-2xl flex flex-col justify-end items-start">
          <div className="h-5 w-5 rounded-full border flex items-center justify-center mb-4 border-gray-500">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              className="h-2 w-2 text-gray-300"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"
              />
            </svg>
          </div>

          <h1 className="font-bold text-xl text-white mb-0 mt-4 relative z-50">
            Meteors because they're cool
          </h1>

          <p className="font-normal text-base text-slate-500 mb-4 relative z-50">
            I don't know what to write so I'll just paste something cool here.
            One more sentence because lorem ipsum is just unacceptable. 
          </p>

          <button className="border px-4 py-1 rounded-lg !text-sm  border-gray-500 text-gray-300">
            Explore &rarr;
          </button>

          {/* Meaty part - Meteor effect */}
          <Meteors number={10} />
        </div>
      </div>
    </div>
  );
};

Here, we are embedding the <Meteor /> component with a number={10} prop to only have 10 meteors in our component.

The final component looks like this:

The final Card Component with Meteors

Conclusion

It is really easy to create beautiful components that stand out with TailwindCSS

I loved creating this component from scratch and hope it helps you make your components stand out.

If you'd like to see more of these cool TailwindCSS and Framer motion components, let me know on Twitter and I'd be more than happy to work on it. :)

Happy coding! ✨

Flutter, Google's UI toolkit for building natively compiled applications for mobile, web, and desktop, offers a powerful animation system that allows developers to create stunning custom animations.

In this step-by-step guide, we will explore how to build beautiful custom animations in Flutter to take your app's UI to the next level.

Prerequisites

Before we start, make sure you have Flutter installed on your system. It's also useful to have a basic understanding of the framework's fundamental concepts, such as widgets, state management, and gesture handling.

Finally, but most importantly, muster up a small spark of interest in learning animation! :) Because once you see the widgets come to life with animation magic, that spark's gonna grow into a blazing inferno of excitement.

In this guide, we are going to see how to implement animation in two kinds of tasks:

1. Animated List
2. Animated Loader

We are going to create a simple Todo app with Animated List and Animated Loader. So, saddle up, and let's ride into the world of animating lists and loaders in Flutter. 🤠🐴.

How to Build an Animated List in Flutter

First, we will create a simple Flutter list with animation. Animated List is a Flutter widget that allows developers to create dynamic and animated lists with smooth and visually appealing transitions. It is part of the Flutter animation framework and is an extension of the ListView widget.

The Animated List automatically animates changes to the list's content, such as inserting or removing items, providing an engaging and interactive user experience.

Key Features

Insertion and Removal Animations

When you add or remove items from the list, the Animated List animates these changes with predefined or custom animations, making the list's modifications visually seamless.

Built-in Animation Controllers

Animated List comes with built-in animation controllers that handle the timing and ease curves of the animations, simplifying the process of creating smooth and fluid transitions.

Customizable Animations

While Animated List provides default animations, developers can also customize the animations to fit the app's unique visual style and requirements.

Now, while theory is essential, practical examples bring concepts to life. So, let's dive into a practical example of using an Animated List in Flutter.

Project Setup and Dependencies

To create our Flutter app, we'll use Visual Studio Code as our development environment.

If you're not familiar with setting up a new Flutter project, don't worry – you can refer to my previous blogs for step-by-step instructions. If you're already comfortable creating Flutter projects, skip this part and proceed with the app development.

No need to install any external plugin to create an Animated List.

How to Create a Task Model

In this blog, we will focus more on animation so we can keep the functionalities simple. Define a Task class that represents a single task with a title and status.

I created a file called todo_list.dart in the lib folder that will contain the Animated List. First I created a simple class that represents a Task with title and status describing whether it's completed or not.

todo_list.dart

class Task {
  String title;
  bool isCompleted;
  Task(this.title, this.isCompleted);
}

How to Create a Simple List with Animation

Technically our goal is to create a scrolling container that animates items when inserted or removed. This widget's AnimatedListState can be used to dynamically insert or remove items.

To refer to the AnimatedListState either provide a GlobalKey or use the static of method from an item's input callback.

To do that, let's create a StatefulWidget to create an Animated List.

todo_list.dart

// todo_list.dart
import 'package:flutter/material.dart';
void main() {
  runApp(TodoListApp());
}
class Task {
  String title;
  bool isCompleted;
  Task(this.title, this.isCompleted);
}

class TodoListApp extends StatefulWidget {
  @override
  _TodoListAppState createState() => _TodoListAppState();
}

class _TodoListAppState extends State<TodoListApp> {
  List<Task> tasks = [];
  bool isLoading = false;

  final GlobalKey<AnimatedListState> _animatedListKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ToDo List')),
        body: AnimatedList(
          key: _animatedListKey,
          initialItemCount: tasks.length,
          itemBuilder: (context, index, animation) {
            return _buildTaskItem(tasks[index], animation, index);
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _addTask,
          child: const Icon(Icons.add),
        ),
        backgroundColor: Colors.white60,
      ),
    );
  }

  Widget _buildTaskItem(Task task, Animation<double> animation, int index) {
    return SizeTransition(
        sizeFactor: animation,
        child: Card(
          color: Colors.white,
          child: ListTile(
            title: Text(task.title),
            onLongPress: () => _removeTask(index),
          ),
        ));
  }

  void _addTask() async {
    Task newTask = Task('New Task ${tasks.length + 1}', false);
    tasks.add(newTask);
    _animatedListKey.currentState!.insertItem(tasks.length - 1);
  }

  void _removeTask(int index) async {
    _animatedListKey.currentState!.removeItem(index,
        (context, animation) => _buildTaskItem(tasks[index], animation, index));
    tasks.removeAt(index);
  }
}

Here, we used AnimatedList (a default Flutter package ). The AnimatedList class in Flutter is a powerful widget that allows us to create dynamic and animated lists with smooth transitions. It is an extension of the ListView widget, providing built-in animation support for adding, removing, and updating items in the list.

The primary goal of AnimatedList is to enhance the user experience by animating changes to the list's content, making the app feel more interactive and visually engaging.

AnimatedList has multiple properties or parameters that control various aspects of the widget's behavior, appearance, and animations. Understanding and using these props correctly is crucial to achieving the desired behavior and visual effects in an AnimatedList.

To know about the properties and behavior of AnimatedList please refer to the official documentation.

Simple Animated List in Flutter

In this tutorial, we will be focusing on Animated List and Animated Loader. If you are not familiar with Flutter basics (like widgets, states, and so on) I would recommend that you read my previous tutorial.

How to Build the Animated Loader

A loader is commonly used to provide visual feedback to users while waiting for data to load, processing content, or completing network requests. Loaders help improve the user experience by giving a sense of activity and preventing the app from appearing unresponsive during waiting periods.

There are various ways to implement loaders in Flutter, including using built-in widgets, third-party packages, or creating custom loaders. Additionally, "animated loaders" add an extra touch of dynamism to the loading process by incorporating smooth animations.

Let's add an animated loader in our TodoApp while creating and deleting a task.

How to Add the Flutter Loader Package

You'll need to install the package with the following command:

flutter pub add loading_animation_widget

Then you should see the following screen:

Installing loading animation package in Flutter

Now your package should be ready for use.

How to Implement AnimatedLoader

The loading_animation_widget package offers various loader animations that we can use to display loading indicators in our app. By importing the package, we gain access to these loader animations and can utilize them to enhance the user experience during loading operations or any other asynchronous tasks.

All loading animation APIs follow the same straightforward implementation. There is a static method for each animation inside the LoadingAnimationWidget class, which returns the Object of that animation. Both size and color are required some animations need more than one color.

loading_animation_widget offers multiple animated loaders with customized animation. Let's explore a few of those and integrate into our Todo App.

Now I created a file called animated_loader.dart, which has AnimatedLoader Widget.

// animated_loader.dart
import 'package:flutter/material.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';

void main() {
  runApp(AnimatedLoader());
}
class AnimatedLoader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyLoaderScreen(),
    );
  }
}
class MyLoaderScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: LoadingAnimationWidget.staggeredDotsWave(
            size: 75, color: Colors.deepPurple),
      ),
      backgroundColor: Colors.transparent,
    );
  }
}

Let's show this animated loader in our animated list while adding or removing a task.

todo_list.dart

import 'package:flutter/material.dart';
import 'package:flutter_animation/animated_loader.dart';
import 'package:loader_overlay/loader_overlay.dart';

void main() {
  runApp(TodoListApp());
}

class Task {
  String title;
  bool isCompleted;
  Task(this.title, this.isCompleted);
}

class TodoListApp extends StatefulWidget {
  @override
  _TodoListAppState createState() => _TodoListAppState();
}

class _TodoListAppState extends State<TodoListApp> {
  List<Task> tasks = [];
  bool isLoading = false;

  final GlobalKey<AnimatedListState> _animatedListKey = GlobalKey();

  Future<void> loadData() async {
    setState(() {
      isLoading = true;
    });
    await Future.delayed(const Duration(seconds: 2));
    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ToDo List')),
        body: Stack(
          children: [
            AnimatedList(
              key: _animatedListKey,
              initialItemCount: tasks.length,
              itemBuilder: (context, index, animation) {
                return _buildTaskItem(tasks[index], animation, index);
              },
            ),
            if (isLoading)
              const Opacity(
                opacity: 0,
                child: ModalBarrier(dismissible: false, color: Colors.black),
              ),
            if (isLoading)
              Center(
                child: Center(child: AnimatedLoader()),
              ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _addTask,
          child: const Icon(Icons.add),
        ),
        backgroundColor: Colors.white60,
      ),
    );
  }

  Widget _buildTaskItem(Task task, Animation<double> animation, int index) {
    return SizeTransition(
        sizeFactor: animation,
        child: Card(
          color: Colors.white,
          child: ListTile(
            title: Text(task.title),
            onLongPress: () => _removeTask(index),
          ),
        ));
  }

  void _addTask() async {
    Task newTask = Task('New Task ${tasks.length + 1}', false);
    await loadData();
    tasks.add(newTask);
    _animatedListKey.currentState!.insertItem(tasks.length - 1);
  }

  void _removeTask(int index) async {
    await loadData();
    _animatedListKey.currentState!.removeItem(index,
        (context, animation) => _buildTaskItem(tasks[index], animation, index));
    tasks.removeAt(index);
  }
}

To explore more about the Loader you can refer to the docs. It has multiple loaders with customization options.

Animated List with Animated Loader in Flutter

Hurray! We can see that the Animation Loader and Animation List are rendering very smoothly, and they look even better.

If you are implementing this from scratch, that's great and it'll really help you learn. But if you prefer, you can also clone the repo from GitHub. Either way, I'm excited to see the Animation Loader and Animation List in action from you.

Note: In the context of creating a task in real time, a loader might not be necessary since the creation of a task typically happens quickly and doesn't involve any lengthy processes like fetching data from an API or performing complex computations. But adding a loader during task creation can still be a useful visual cue to indicate that the task is being processed and provide immediate feedback to the user.

Conclusion

We explored the world of creating beautiful custom animations in Flutter, focusing on the implementation of Animated List and Animated Loader. By understanding the Animated List, we learned how to create dynamic and interactive lists with smooth item insertions and removals.

Through these examples, you saw Flutter's ability to make animation implementation enjoyable and straightforward. By incorporating custom animations into your apps, you can create engaging and visually appealing interfaces that captivate users and set your apps apart.

If you wish to learn more about Flutter, subscribe to my email newsletter (https://5minslearn.gogosoon.com/) and follow me on social media.

Happy Animating and Fluttering! 🚀

If you're building an Android app, you should consider adding animations. They can improve your app's user experience and increase retention.

These days, if you see an app that has no animation, it can feel odd and out-dated. And since interactive experiences are kind of the new norm, you'll want to figure out ways to set your app apart.

What We'll Build Here

Now, it might seem difficult to make your app stand out if you just have something basic like a quote sharing app (which is what we are going to work on here). It can be hard to hook the user and keep them interested.

Of course, you could just add two simple buttons to load the next/previous quote and call it a day. But that's pretty basic and any app could do that! Even if you're just building a simple side-project, there's no trade-off for good UX :)

So what we'll do in this tutorial is drop the buttons, and instead have logic where a user can swipe the card to the left. When they've swiped far enough, the app will load a new card with a new quote.

By the end of this post, you will learn how to make a really smooth animated card which a user can swipe that can perform whatever action you choose. Here's a demo of how it works:

Amazing, right? Let's get into it!

Prerequisites

For this tutorial, we will use Kotlin as the programming language for our app – but you can easily translate the code to Java and it would work the same.

For reference, this is the quote card that we wish to enable the swipe feature on.

It is an androidX CardView with a bunch of TextViews and an ImageView. There's also a ProgressBar that gets shown while loading a new quote.

We won't be making the XML code for the user interface. You can get the layout I used here from the GitHub repository, or build your own.

Here's the complete code for our Quotes app, if you wish to check it out. It uses the MVVM design pattern, but this article doesn't rely on what pattern you use for the business logic of your app, as we'll just be working on the UI part.

Now, we're ready to make that awesome swipe interface!

How to Handle Swipes in Our App

To handle swipes, we first need to set a touch listener on the card. Each time an action is performed on the card, the touch listener is called. Within the listener, we will add the logic to do the math and perform the animations.

Here is the blueprint of the touch listener we will be using:

quoteCard.setOnTouchListener(
    View.OnTouchListener { view, event ->
        when (event.action) {
            MotionEvent.ACTION_MOVE -> {
                // TODO: Handle ACTION_MOVE
            }
            MotionEvent.ACTION_UP -> {
                // TODO: Handle ACTION_UP
            }
        }

        // required to by-pass lint warning
        view.performClick()
        return@OnTouchListener true
    }
)

Here, we are specifically listening for 2 actions on the card – the ACTION_MOVE and the ACTION_UP.

• The ACTION_MOVE event is called when a user starts swiping the card, that is, moving it.
• The ACTION_UP is called when a user lifts their finger from the card, basically, when they release it.

There are many other action events that we can override, such as ACTION_DOWN that's called when a person gets hold of the view, but we don't need them for this feature.

The basic setup for the card is done, so let's figure out the swiping logic.

The math behind the swipe action

First, let's re-think what we want to achieve. Implementing functionality is easier when you know exactly what you wish to have. Your code will also make more sense when your requirements are clear.

Here, we have a quote card. We want users to be able to swipe it only to the left, and if the minimum threshold to load a new quote is reached, it should move back to its original position and load a new quote.

Now, to achieve this, let's think of it in terms of the card. Let's define the mean position as the center of the card.

Mean Position of the Card

We want the card to swipe if and only if the user swipes it to the left of the mean position.

Swipe only if moved towards the left of mean position

So how can we make this happen?

You guessed it – we will calculate the mean position and on the ACTION_MOVE event, we will check if the user swiped to the left and move the card accordingly.

How to implement the swipe logic

To implement the logic, we first need to have the starting position of the card, which is fairly easy to calculate. We will just make sure that it is calculated with respect to the full-screen width, not just the card's width.

Place these lines of code before the when(event.action) statement:

quoteCard.setOnTouchListener(
    View.OnTouchListener { view, event ->

        // variables to store current configuration of quote card.
        val displayMetrics = resources.displayMetrics
        val cardWidth = quoteCard.width
        val cardStart = (displayMetrics.widthPixels.toFloat() / 2) - (cardWidth / 2)

        when (event.action) {
            ...
        }
        ...
    }
)

First we get the displayMetrics from resources, which will give us the width of the screen using displayMetrics.widthPixels.toFloat().

Then we get the cardWidth using the width property of the quoteCard.

Finally, we calculate the starting position of the card using the formula (width of screen/2) - (cardWidth/2). Essentially, this gives us the x-coordinate of this position of the card:

Starting position of card.

Now, let's implement the code for the ACTION_MOVE event.

How to handle the ACTION_MOVE event

Inside the ACTION_MOVE block, we first initialise the newX variable that holds the new x-coordinate that the card has been swiped to.

val newX = event.rawX

event.rawX gives us the absolute value of the new coordinate with respect to the screen width.

newX will contain the x-coordinate where the user's finger is, at any given moment. The value 0.0 for newX means that the user swiped to the left-most part of the screen. And for my emulator, 1080.0 represents the right-most edge of the screen.

Since, we want the card to swipe only if newX is less than the mean position of the card, we will place an if-condition here to verify that this is the case.

Think of this with simple values. Let's suppose that the mean position of the card is at x-coordinate 540.0 (small x-coordinate) and the user swipes to 710.0 (bigger x-coordinate). But we don't want them to be able to swipe to the right. And if the user swipes to 320.0 (smaller x-coordinate), then we need to carry out the swipe and move the card to the new position.

Here's the code to implement the above logic:

if (newX - cardWidth < cardStart) { // or newX < cardStart + cardWidth
    quoteCard.animate().x(
        min(cardStart, newX - (cardWidth / 2))
    )
    .setDuration(0)
    .start()
}

We subtract cardWidth from newX because newX is an absolute value which is not relative to the card. It has a higher value because cardStart is towards the start of the screen, and newX is initially somewhere in the middle (a user would generally swipe from the middle).

We want to compare the value of shift in the x-coordinate and median to the value of cardStart, not the value of newX, so we take this into account by subtracting cardWidth.

Then, we carry out the animation using quoteCard.animate() and we change its x coordinate using the x() function.

Now, why do we do min(cardStart, newX - (cardWidth/2))?

This is very interesting and intuitive to understand. From the beginning, we are emphasizing that the card should move only to the left and not to the right.

newX - (cardWidth/2)) is nothing but the swiped distance towards the left (so subtraction is involved – for the right side, it should be added).

The min() function here returns the minimum of the two values provided. If the swiped distance is less than the cardStart, it is returned, otherwise cardStart is used. This is the condition we want to meet and min() makes it really easy to handle.

setDuration(0) ensures that the animation is carried instantaneously (which keeps swiping from feeling laggy). start() actually starts the animation with the given properties.

This animation will clear any doubt your have on how this works:

Visualisation of the aforementioned concept

(I don't have expertise on making animations, this was the best I could come up with.)

Here is the final code for the ACTION_MOVE event:

MotionEvent.ACTION_MOVE -> {
    // get the new coordinate of the event on X-axis
    val newX = event.rawX

    // carry out swipe only if newX - cardWidth < cardStart, that is
    // the card is swiped to the left side, not to the right
    if (newX - cardWidth < cardStart) {
        quoteCard.animate()
            .x(
                min(cardStart, newX - (cardWidth / 2))
            )
        .setDuration(0)
        .start()
    }
}

You can also include a TextView to the UI that reflects when the user should release the card. Place this code inside the above if statement too:

if (quoteCard.x < MIN_SWIPE_DISTANCE) textView.text = getString(R.string.releaseCard)
else textView.text = getString(R.string.infoText)

where MIN_SWIPE_DISTANCE is -250:

// -250 produces best result, feel free to change to your liking
const val MIN_SWIPE_DISTANCE = -250 // User should move alteast -250 from mean position to load new quote

Now, the ACTION_MOVE event is handled properly. Let's write the code to handle the ACTION_UP event, that is, when the card is released.

How to handle the ACTION_UP event

For the ACTION_UP event, we want the card to come back to its original position, wait for about 100 milliseconds, then load a new quote.

The logic to animate the card is similar, but this time we will make its animation duration about 150 millisecond to make it look smooth.

First, create a variable currentX that holds the current value of the x coordinate of the quote card. We'll use this variable later.

var currentX = quoteCard.x

Then, start the animation on the card. Pass the cardStart variable to the x() function to make it return to its original position and set the duration to 150.

quoteCard.animate()
    .x(cardStart)
    .setDuration(150)
// continued below

This time, we set a listener on the animation. A listener is something that keeps an eye on the animation. By using it, we can perform actions on various animation events such as start, end, resume, and more.

// continuation
.setListener(
    object : AnimatorListenerAdapter() {
        override fun onAnimationEnd(animation: Animator) {
            viewLifecycleOwner.lifecycleScope.launch(Dispatchers.Default) {
                delay(100)
                // check if the swipe distance was more than
                // minimum swipe required to load a new quote
                if (currentX < MIN_SWIPE_DISTANCE) {
                    // Add logic to load a new quote if swiped adequately
                    viewModel.getRandomQuote()
                    currentX = 0f
                }
            }
        }
    }
)
.start()

We set a listener to look for the ending of the animation by overriding the onAnimationEnd() function.

As soon as the animation ends, we launch a coroutine (similar to Threads in Java but much more efficient) with a delay of 100 milliseconds. It then checks if the user had swiped further than the MIN_SWIPE_DISTANCE needed to load a new quote. The variable currentX is used for the comparison here.

If the user actually swipes passing the minimum distance, the coroutine is delayed for 100 milliseconds. Then the view model loads a new random quote from the API, also resetting the currentX variable to 0f.

The final code for the ACTION_UP event looks like this:

MotionEvent.ACTION_UP -> {
    var currentX = quoteCard.x
    quoteCard.animate()
        .x(cardStart)
        .setDuration(150)
        .setListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator) {
                viewLifecycleOwner.lifecycleScope.launch(Dispatchers.Default) {
                    delay(100)
                    // check if the swipe distance was more than
                    // minimum swipe required to load a new quote
                    if (currentX < MIN_SWIPE_DISTANCE) {
                        // Add logic to load a new quote if swiped adequately
                        viewModel.getRandomQuote()
                        currentX = 0f
                    }
                }
            }
        })
        .start()
    textView.text = getString(R.string.infoText)
}

Final Code

This is the final code for the complete onTouchListener():

quoteCard.setOnTouchListener(
    View.OnTouchListener { v, event ->

        // variables to store current configuration of quote card.
        val displayMetrics = resources.displayMetrics
        val cardWidth = quoteCard.width
        val cardStart = (displayMetrics.widthPixels.toFloat() / 2) - (cardWidth / 2)

        when (event.action) {
            MotionEvent.ACTION_UP -> {
                var currentX = quoteCard.x
                quoteCard.animate()
                    .x(cardStart)
                    .setDuration(150)
                    .setListener(
                        object : AnimatorListenerAdapter() {
                            override fun onAnimationEnd(animation: Animator) {
                                viewLifecycleOwner.lifecycleScope.launch(Dispatchers.Default) {
                                    delay(100)

                                    // check if the swipe distance was more than
                                    // minimum swipe required to load a new quote
                                    if (currentX < MIN_SWIPE_DISTANCE) {
                                        // Add logic to load a new quote if swiped adequately
                                        viewModel.getRandomQuote()
                                        currentX = 0f
                                    }
                                }
                            }
                        }
                    )
                    .start()
                textView.text = getString(R.string.infoText)
            }
            MotionEvent.ACTION_MOVE -> {
                // get the new co-ordinate of X-axis
                val newX = event.rawX

                // carry out swipe only if newX < cardStart, that is,
                // the card is swiped to the left side, not to the right
                if (newX - cardWidth < cardStart) {
                    quoteCard.animate()
                        .x(
                            min(cardStart, newX - (cardWidth / 2))
                        )
                        .setDuration(0)
                        .start()
                    if (quoteCard.x < MIN_SWIPE_DISTANCE) 
                        textView.text = getString(R.string.releaseCard)
                    else textView.text = getString(R.string.infoText)
                }
            }
        }

        // required to by-pass lint warning
        v.performClick()
        return@OnTouchListener true
    }
}

Congrats! In this tutorial, we've implemented animation that lets a user swipe a card containing a quote to get a new quote.

Don't forget to download the app and test it out yourself. Stars and contributions on the GitHub repository are welcomed!

Conclusion

Now you have learned how to animate a card and handle animation listeners on it. This helps create better UX that makes your app stand out.

Using the knowledge you gained in this post, you can now create most of the following animations for views in Android:

• Programmatically create sliding animations for Android views.

Just as we did in this tutorial.

• Left to right animation

This is fairly simple, just turn the subtraction in the variables to addition and < signs in the if statements to > signs. With these few tweaks here and there, the right to left animations in card view can be turned into left to right ones!

• You can also show and hide views using animations.

For this, you have to keep track of the start position and end position then animate them with alpha() from 0 to 1. For an example, you can refer to my library Accolib to create animated FAQ accordions.

• Basic animated layout changes can be achieved with view animations.

Thanks a lot for reading so far, I hope this post added some value. Subscribe to my newsletter at Genics Blog to stay updated with my future articles!

Lottie is a library that helps render Adobe After Effects animations natively on mobile and the web. I like using Lottie for animations in my projects because:

• Creating an animation from scratch can be time-consuming, and
• GIF files can be double the size of Lottie JSON files (the files containing the Lottie animation)

If you use Lottie frequently in your projects, you have probably felt the stress of:

• finding an appropriate Lottie animation (if you are not familiar with Adobe After Effects)
• knowing what the complete animation looks like
• editing it to your preferred style, and
• implementing it on the web or mobile.

The aim of this article is to boost your productivity as a Lottie designer and developer by providing you with efficient Lottie resources. I will try to include a lottief resources to be as helpful as possible. No pun intended.

Resources to Get Lottie Animations

After you have created your animation in Adobe After Effects, you can export it to the Lottie JSON format using the bodymovin extension.

If you are not familiar with Adobe AE, you can get Lottie animations from a number of places. Let's look at some options here.

Drawer

Drawer offers both free and paid Lottie animations in various formats like JSON, SVG, and PNG as well as Adobe AE, XD and Illustrator files.

After you have selected your preferred animation pack, you can then go ahead with the format you want to use, preferably the Lottie JSON format.

Screenshot of Drawer's Coronavirus Icons' page

LottieFiles

LottieFiles also offers free and paid Lottie animations. There are packs and individual icons, but unlike Drawer, LottieFiles strictly provides JSON files for Lottie animations.

Screenshot of teen walking animation on LottieFiles

Icons8

Icons8 provides individual animated icons as well as packs of related animated icons. They provide links to the statically-hosted Lottie JSON files of the animations, which you can either download or use as is in your implementation.

Screenshot of Icons8's pause animated icon's page

Lordicon

Lordicon is a website that offers animations that you can customize before you use them. You can edit features like color and width and then download the animations in your preferred format.

Aside from the JSON format, they also provide animations in HTML, GIF, AEP, PNG, EPS, and SVG.

Screenshot of Lordicon's icons page

How to Preview Lottie Animations

After you have gotten your Lottie animation from one of the sites listed above, you might want to see all the frames you have in the animation. That is, you'll want to watch the animation play from beginning to end.

While this is usually displayed on the sites where you get the animation, I recommend that you check what is in the file you are downloading to confirm that it is what you think you are actually downloading.

Screenshot of Drawer Preview page

To do this, you could go ahead and implement it on web or mobile – but that would just be time-consuming.

Instead, there are resources out there like Drawer Preview and LottieFiles Preview that allow you see what is in a Lottie JSON file. All you have to do is drag and drop the file on the provided box. When you have dropped the file, the animation plays automatically and loops, too.

Screenshot of LottieFiles Preview page

How to Edit Lottie Animations

You might want to tweak one or two things in your animation. Since you did not create it yourself on Adobe AE, you might think that tweaking it isn't possible. But that is not entirely true.

With LottieFiles Editor, you can see the width and height of the animation, frame rate, number of frames, duration, playback speed, and all the layers present in the animation.

Apart from the number of frames, you can edit all these features to your preferences. When you are done, you can share the draft with someone, export a particular layer or the entire Lottie animation, or export it as a Telegram sticker after meeting the required specifications.

Screenshot of LottieFiles Editor page

How to Implement Lottie Animations

This is the part where you actually use the animation after you've inspected it and made any edits you wanted to make.

You could implement the animation natively on the web, mobile, or CMSs. There are many tutorials out here that show you how to do this, but here I'll provide a few comprehensive resources.

How to Implement Lottie on the Web

• Animating with Lottie | CSS-Tricks
• How to use web animations with Lottie
• How to add a Lottie animation in a web page

How to Implement Lottie on Mobile

• How to use Lottie Animation in Android Application
• Getting Started with Lottie Animations in an Android App
• How to add Lottie Animation in an Android app
• Using Lottie Animations in watchOS
• How to add Lottie Animations in iOS apps (Swift)
• Flutter — Lottie Animation

How to Implement Lottie on CMSs

• How to Use Lottie on Webflow
• Add web animations with After Effects & Lottie
• Add Amazing Animations to Your Website With Lottie Widget
• Using Lottie Animations on Wix

Lottie Docs and Libraries

In addition to the tools I listed above, when you're implementing Lottie animations there is no better place to start looking than the Lottie documentation. If you are more comfortable with the npm package, here is the package’s documentation too.

Also, the Lottie libraries for various platforms are available on GitHub:

• lottie-android
• lottie-ios
• lottie-web

With all these resources, I really hope you will not be lost because of something Lottie-related.

Thanks for reading and happy animating!

In today’s world, just having a website is not enough. The website needs to have a clean UI and it needs to be intuitive. And most importantly, it needs to have some sort of interactive element.

Interactivity keeps users glued to your site for longer periods of time. As a result, it increases the chances that users will become customers. Also, longer interaction time leads to a lower bounce rate and a higher ranking on search engines.

One of the most common and basic forms of interaction happens when a user scrolls on your website. But wouldn’t it be quite boring if the user keeps scrolling through your long static page?

In this tutorial, we will have a look at three basic animations that you can implement on scroll. Parallax, fade, and slide animations are the most popular animations devs use to make scrolling more fun. Let’s see how we can build them for our sites.

Before we move further, here are the end results:

Parallax ([View Demo](https://animations-demo-ffcb4.web.app/parallax" class="cd il" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;))

Fade ([View Demo](https://animations-demo-ffcb4.web.app/fade" class="cd il" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;))

Slide ([View Demo](https://animations-demo-ffcb4.web.app/slide" class="cd il" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;))

Project Setup

Prerequisites

We will be using Angular 11 to create our project. And we'll use VS Code as our IDE.

In order to build the animations, we are going to use the fabulous Green Sock Animation Platform (gsap). It’s one of the best JavaScript animation libraries out there.

Create the project

Create an Angular project by entering the command below. Make sure to enable routing when it asks you.

ng new animations --style css
code animations

This will create a new project named animations with the style format as CSS. Next, it will open the project in VS Code.

Now let’s install gsap. In your VS Code terminal, enter the command below:

npm install --save gsap @types/gsap

This will install the gsap library and the typing files via @types/gsap.

Lastly, let’s create three components. Enter the commands below:

ng g c parallax
ng g c fade
ng g c slide

How to set up the routes

Let’s create three separate routes: /parallax, /fade, and /scroll. Open your app-routing.module.ts and add the routes as below:

How to Create Parallax Animation

Since we have now set up the project, let’s start with parallax animation.

When you create page animations, you typically use sections. So, open your parallax.component.html file and paste in the code below:

Let’s add some styling to these sections. Since we are going to use sections in all three components, we will add styling to the common styles.css file.

Open your styles.css file and paste in the CSS below:

In the above code, we are making the height and width of the section equal to the viewport’s height and width. Second, we are aligning the content in the center of the section. Lastly, we are setting the font style for how we want to display the text.

Since the bg class used in parallax.component.html is specific to parallax, we will define its properties in parallax.component.css. Open that file and paste in the CSS below:

In order to set the parallax animation, we need to add some TypeScript code. So, open your parallax.component.ts file and add the code below in your ngOnInit function:

I have added inline comments to help you understand the code. Message me if you need further explanation.

Finally, add the imports below at the top of your TS file so that you don’t get any compile-time errors:

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/all';

That’s it! You can now visit http://localhost:4200/parallax to see the beautiful animation.

How to Create Fade Animation

For the fade animation, open the fade.component.html file and paste in the HTML code below:

In the fade.component.css, paste in the CSS below:

We are going to display only one section at a time. So we will hide all sections except the first one. Also, since we are not moving the sections along with the scroll, we'll mark its position as fixed.

Let’s add the animation code to make the other sections visible on scroll. Open the fade.component.ts file and paste in the following code:

I have added inline comments so as to make the code self-explanatory. For any clarifications, please let me know.

Visit http://localhost:4200/fade to see the smooth fading animation as you scroll.

How to Create Slide Animation

This is typically the easiest of the lot to understand and implement.

Open your slide.component.html file and paste in the code below. It’s similar to fade.component.html, except the class is removed from the first section.

We don't need to add any CSS.

Next, open the slide.component.ts file and add the code below:

Again, I have added the inline comments for a better understanding of the code. For any queries, just reach out to me.

Open http://localhost:4200/slide to see a mesmerizing slide animation as you scroll.

Conclusion

Animations add a lot of value to your site, and they help keep your users engaged. As with all things, don't go overboard and use animations in moderation. Don’t clutter or mess up the website with heavy images and funky animations. Keep It Simple & Keep It Subtle (KIS & KIS).

In this tutorial, we saw how to add simple parallax, fade, and slide animations for page sections.

Lastly, a great thanks to Lorem Picsum for providing such great photos.

If you liked this article, you might also like the below articles:

• Lazy Loading Modules in Angular
• .NET 5: How to Authenticate & Authorise API's correctly
• Learn TDD with Integration Tests in .NET 5.0

Note: You can find the whole project on GitHub.

• What is the HTML tag blink?
• How do you use the blink tag?
• Can you still use the blink tag?
• Recreating the blink tag with CSS animations

What is the HTML tag blink?

The blink tag (<blink>) is an obsolete HTML tag that makes the content of that tag slowly flash.

Google search of "blink tag"

This, along with some other obsolete tags like the marquee tag (<marquee>), were an easy way to add simple animation effects to your site.

How do you use the blink tag?

Being that the blink tag was a simple HTML element, you would use it right in line with your content.

For example, if you wanted the word "blink" in blink-182 to blink, you would write the following HTML:

<p>
  <blink>blink</blink>-182
</p>

Can you still use the blink tag?

As you might have noticed in the gif above, this tag is obsolete.

Blink tag browser compatibility

This means you can’t use the blink HTML tag itself. However, that shouldn't stop us from remaking it in all of its blinking glory.

_Note: the Blink tag was deprecated due to accessibility concerns. Please do your research before trying to use a solution that provides the same effect, as we should all be making an effort to make our projects as inclusive as possible._

Recreating the blink tag with CSS animations

In today’s web development world, animations are generally handled with CSS or JavaScript. Using CSS animations, we can recreate our blink tag with a few lines and be back in business.

With the following CSS:

.blink {
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

You can add the .blink class to any HTML element to make it blink.

<p>
  <span class="blink">blink</span>-182
</p>

HTML CSS blink effect

Modernizing the blink tag

This is 2020, what if we wanted something a little smoother?

Well to start, we can make the animation fade by removing the steps from the animation definitions.

.blink {
  animation: blink 1s infinite;
}

Blink fade effect

Or what if we wanted to make it fade out like a sci-fi effect?

.blink {
  animation: blink 3s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}

CSS blink fade sci-fi effect

Or even a nice grow and fade effect.

.blink {
  animation: blink 3s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(2);
  }
  51% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

CSS blink grow and fade effect

Taking control of animations with CSS

Though you might not be able to use the blink tag, you still have a lot of options. CSS provides a ton of animation options natively, so whether you want to recreate your favorite HTML pastime or recreate the Alien title sequence, the possibilities are virtually endless.