A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and
interactive. Toasts automatically disappear after a timeout. For example, clicking Send on an email triggers a "Sending message..." toast, as shown in the following screen capture: If your app targets Android 12 (API level 31) or higher, its toast is limited to two lines of
text and shows the application icon next to the text. Be aware that the line length of this text varies by screen size, so it's good to make the text as short as possible. If your app is in the foreground, consider using a snackbar instead of using a toast. Snackbars include user-actionable options, which can
provide a better app experience. If your app is in the background, and you want users to take some action, use a notification instead. Use the The To display the toast, call the
You can chain your methods to avoid holding on to the Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates. Last updated 2022-09-02 UTC. [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }]
How to Create Web Animations with Anime.jsThere are many JavaScript animation libraries out there, but Anime.js is one of the best. It’s easy to use, has a small and simple API, and offers everything you could want from a modern animation engine. The library has a small file size and supports all modern browsers, including IE/Edge 11+. The only thing that could stop you from using Anime.js right away is its minimal, zen-like documentation. I like the compact, structured, elegant approach it takes, but I think that a more detailed explanation would be helpful. I’ll try to fix this issue in this tutorial. To get started, download and include the
Alternatively, you can use the latest version of the library hosted on a CDN:
Now, to create an animation, we use the
There are several kinds of properties used to describe the animation. They are grouped into four distinct categories:
Let’s now see how this applies in practice. Consider the following example:
See the Pen Note: I’m not going to cover the HTML and CSS sections of the code in the tutorial. These tend to be easy to grasp without additional explanation. You can find and explore the HTML and CSS in the embedded pens that follow each example. In the above example:
You may notice that I don’t use any units when specifying property values. That’s because if the original value has a unit, it is automatically added to the animated value. So, we can safely omit the units. But if we want to use a specific unit we must add it intentionally. Let’s create something more meaningful. Creating a Pendulum AnimationIn this example, we will create a pendulum animation. After we “draw” a pendulum using our HTML and CSS skills, it’s time to bring it to life:
See the Pen
In this animation, we use the so-called from-to value type, which defines a range of movement for the animation. In our case, the rod of the pendulum is rotated from Well done. Let’s move to the next example. Creating a Battery Charge AnimationIn this example, we want to create an animated icon of a charging battery, similar to the icons on our smartphones. This is easily doable with a bit of HTML and CSS. Here is the code for the animation:
See the Pen Here we have three segments (the green To do so, instead of a
literal value, we provide a function with three arguments ( We also use the Improving the Battery Charging AnimationNow, the animation looks good, but let’s improve it a bit by adding a progress label that shows the charge percentage. Here is the code:
See the Pen This example introduces several more library features. We’ll explore them one by one. First, we create a The first animation is almost identical to the previous example, except
for the In the second animation, we use the Next, we use two of the callbacks which Anime.js offers. To bind the progress label value from HTML with the As a result, the charging animation will play until the progress becomes 100% and then it will stop and force the segments to their end animation state. The icon will appear as fully charged. Creating More Complex Animations With KeyframesUp until now, we’ve dealt with one-step animations that move an object from A to B. But what about moving it from A to B to C to D? In the next example, we’ll explore how to use property keyframes to create multi-step animations. We’ll move a simple square around another one that serves as a box.
See the Pen First, we create a reference
to the box element. We use it in the For each property we want to animate, we use an array of objects where each object describes a particular keyframe. In our case, we want to move the square vertically and horizontally. So we use The frames are executed from top to bottom and start simultaneously for each property that has a specified keyframes array. Once started, how the ride will continue depends entirely on the way the The result of our animation is that the square exits the box, makes a full orbit around it, and then goes inside again. Creating Text EffectsWe’ve seen an example of staggering above, and now we’ll explore more advanced usage. We’ll use staggering to create a cool text effect.
See the Pen We’ve put each letter inside a Then, we rotate the letters by using a specific property parameter which defines specific parameters to a given property. This gives us more detailed
control over the animation. Here, the letters will be rotated 360 degrees in two seconds applying In the next two properties, we use the We set the animation to wait a second before it starts (by defining a start value), and then a 100-millisecond delay is added relatively for each letter. We intentionally add the Creating Animations with TimelinesA timeline lets you manipulate multiple animations together. Let’s explore a simple example:
See the Pen In this example, we create a ball spinner. To create a timeline, we use the To add an animation to the timeline, we use the In our example, we add three animations, one for each ball. The result is that each ball rises and falls one by one. The problem is that in this basic form, the animation seems very static. Let’s change that. By default, each animation starts after the previous animation ends. But we can control this behavior by using time offsets. Also, if we want to make the animation more flexible and complex, we have to use animation keyframes. Let’s see how this applies in the following example:
See the Pen
Here, we remove the To make the balls move smoothly, we use time offsets which are specified as the second parameter to the The result is a smooth ball spinner animation. ConclusionI hope that you’ve gained a much better understanding of Anime.js. To continue your learning with this foundational knowledge in hand, I recommend checking out the documentation. Anime.js is a simple but powerful animation engine that can be used to create a broad range of animations. Let your imagination run wild. |