Composable CSS animation with anime XYZ – Breaking Magazine.

Quick summary.

Most animation libraries, such as GSAP and Framer Motion, are made entirely of JavaScript or TypeScript, as opposed to Anime XYZ, labeled the “First Composable CSS Animation Toolkit”, which is basically Built with SCSS on While a simple library, it can be used to get a lot of great mobility on the web in a very short time and with very little code.

In this article, you’ll learn how to use the AnimXYZ toolkit to create unique, interactive, and visually appealing animations in Vue.js and plain HTML. By the end of this article, you will have learned that adding some CSS classes to elements in Vue.js components can give you a lot of control over how those elements move in the DOM.

This tutorial will be useful for readers who are interested in creating interactive animations with a few lines of code.

Note: This article requires a basic understanding of Vue.js and CSS.

What is AnimXYZ?

Anime XYZ is a composable, performance, and custom CSS animation toolkit powered by CSS variables. It enables you to create awesome and unique animations without having to write a line of CSS frames. Under the hood, it uses CSS variables to create custom CSS properties. The good thing about AnymXYZ is its public outreach. An element can be activated in one of two ways: when entering or leaving a page. If you want to animate an HTML element with this toolkit, add a class to it. xyz-out Will remove the item from the page, while xyz-in Will move the component to the page.

This awesome toolkit can be used in regular HTML projects as well as in the Vue.js or React app. However, at the time of writing, Response support is still under construction..

More after the jump! Continue reading below.

Why use AnimXYZ?

Composable

Animation with AnimXYZ is possible by adding descriptive class names to your markup. It makes it easy. Write complex CSS animations without writing complex CSS frames.. Moving an element to a page is as easy as adding a class. xyz-in In the component and announcing the descriptive attribute.

<p class="xyz-in" xyz="fade">Composable CSS animation with AnimXYZ</p>

The above code will blur the paragraph element into the page, while the code below will remove the element off the page. Only a class that has a lot of power.

<p class="intro xyz-out" xyz="fade">Composable CSS animation with AnimXYZ</p>

As required

For simple animation, you can use the utility out of the box, but AnimXYZ can do a lot. You can customize and control Anime XYZ to create exactly the animations you want by customizing the CSS variants that run all Anime XYZ animations. We will create some custom animations later in this tutorial.

Efficient

With AnimXYZ, you can create powerful and smooth animations out of the box, and the size is only 2.68 KB for base function and 11.4 KB if you add convenient features.

Easy to learn and use.

AnimXYZ works perfectly with regular HTML and CSS, and can be integrated into a project using the Content Delivery Network (CDN) link. It can also be used in Vue.js and React, although support for React is still under construction. Also, the learning curve with this toolkit is not as fast as with animation libraries like GSAP and Framer Motion, and official documents make it easy to get started because it explains how the package works in simple terms. ۔

Key concepts in AnimXYZ.

Context

When you want a particular flow of animation to be applied to the respective groups of the element, xyz The attribute provides context. Suppose you want three. divThis is how they will be animated when they enter the page. All you have to do is add xyz Attribute the parent component with the composable utility and the variable you want to implement.

<div class="shape-wrapper xyz-in" xyz="fade flip-up flip-left">
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
</div>

The above code will apply the same animation to all. divWith a class of shape. All child elements will be blurred in the page and reverted to the upper left, because the attribute. xyz="fade flip-up flip-left" The basic element has been applied.

See pen. [Contexts in AnimXYZ](https://codepen.io/smashingmag/pen/abyoqdY) from Ejro Asiwoho.

See pen references in AnimXYZ by Eijro Asiuwhu.

AnimXYZ makes it easy to move the child’s element differently from his parents. To get it, add. xyz Attributed to the child element with a different animation variable and different utility, which will rearrange all the features of the animation that he inherited from his parents.

See pen. [Override Parent contexts in AnimXYZ](https://codepen.io/smashingmag/pen/porzayR) by Ejro Asiwoho.

Check out the context of Ejro Asivoho’s pen override parents.

Utility

AnimXYZ comes with a lot of utilities that will enable you to create interesting and powerful CSS animations without having to write custom CSS.

xyz="fade up in-left in-rotate-left out-right out-rotate-right"

For example, the above code contains a. fade up Utility, which will blur the element from top to bottom when it comes to the page. It will come in and rotate left. When the element leaves the page, it will move to the right and rotate off the page.

With the Out of the Box utility, you can say, flip a group of elements to the right and blur them as you leave the page. The possibilities for what can be achieved with utility are endless.

Stagger

Of stagger Controls the utility animation-delay CSS property for each of the elements in a list, so that their animated images are animated one by one. It specifies the amount of time to apply an animation to an element and wait between the start of animation. Basically, it is used to align the animation so that the elements can be animated in sequence.

<div class="shape-wrapper" xyz="fade up-100% origin-top flip-down flip-right-50% rotate-left-100% stagger">
  <div class="shape xyz-in"></div>
  <div class="shape xyz-in"></div>
  <div class="shape xyz-in"></div>
  <div class="shape xyz-in"></div>
</div>

By adding stagger Efficacy, every element in parenting. div One after the other will move from left to right. The order can be made respectable. stagger-rev.

with. stagger:

See pen. [Staggering with AnimXYZ](https://codepen.io/smashingmag/pen/abyoqNG) by Ejro Asiwoho.

Watch Eijro Asiuwhu stumble upon the pen AnimXYZ.

Without stagger:

See pen. [!Staggering Animation – AnimXYZ](https://codepen.io/smashingmag/pen/BadBYzN) by Ejro Asiwoho.

See the pen! Amazing animation – AnimXYZ by Ejro Asivoho.

Using AnimXYZ with HTML and CSS.

Let’s make a card and add some cool animation with AnimeXYZ.

See pen. [Animxyz Demo](https://codepen.io/smashingmag/pen/jOLNZrV) from Ejro Asivoho.

Check out Ejro Asivoho’s pen animex demo.

First, we need to add the AnimXYZ toolkit to our project. The easiest way is via CDN. Grab the CDN, and add it. head Of your HTML document.

Include the following lines of code in your HTML.

// html

 <p class="intro xyz-in" xyz="fade">Composable CSS Animation with Animxyz</p>
  <div class="glass xyz-in" id="glass"
        xyz="fade flip-down flip-right-50%  duration-10">
        <img src="https://cdn.dribbble.com/users/238864/screenshots/15043450/media/7160a9f4acc18f4ec2cbe38eb167de62.jpg"
            alt="" class="avatar xyz-in">
        <p class="des xyz-in">Image by Jordon Cheung</p>
  </div>

This is where the magic comes from. At the top of the page, we have a paragraph tag with a class. xyz-in And one xyz Attribute with value of fade. That means p The element will disappear in the page.

Next, we have a card with one. id Of glass, With the following. xyz Description:

  xyz="fade flip-down flip-right-50%  duration-10"

The above composite utility card will fade on the page. Of flip-down Will set the value card to turn the page from the bottom, and flip-right Returns the value card by 50% when leaving the page. The duration of the animation. 10 The length of time (ie 1 second) determines how long the animation will take to complete a cycle.

Integrating AnimXYZ into Vue.js.

Vue.js project support.

Using the Vue.js command line interface (CLI), run the following command to create the application:

vue create animxyz-vue

Install VueAnimXYZ.

npm install @animxyz/vue

It will install both the basic package and the Vue.js package. After installation, we have to import. VueAnimXYZ Add our project package and plugin globally to our Vue.js application. To do this, open your. main.js Add the following block of code to the file, and accordingly:

import VueAnimXYZ from '@animxyz/vue'  // import AnimXZY vue package
import '@animxyz/core' // import AnimXZY core package

Vue.use(VueAnimXYZ)

Of XyzTransition Component

Of XyzTransition The component is built on top of Vue.js transition Component This is used to animate individual elements inside and outside the page.

Here is a demo to use. XyzTransition Component in Vue.js


Notice that many of the complications that come with Vue.js’ “migration” component have been eliminated to reduce complexity and increase performance. When using the ‘XyzTransition’ component we need to keep in mind that ‘manifest’, ‘visible’, ‘duration’, and ‘mode’ are props. For a more detailed guide, check it out [official documentation](https://animxyz.com/docs/#vue-xyz-transition). Let’s use the `XYZTransition` component to trigger an element when the button is clicked.

<div id="app">
    <button @click="isAnimate = !isAnimate">Animate</button>
    <XyzTransition
      appear
      xyz="fade up in-left in-rotate-left out-right out-rotate-right"
    >
      <div class="square" v-if="isAnimate"></div>
    </XyzTransition>
</div>

Consider how the element we intend to migrate is wrapped in the `XYZTransition` component. This is important because the child element will inherit the utility applied to the `Y XYZTransition` component. The child element is also presented conditionally when `isAnimate` is set to` true`. When the button is clicked, the child element is toggled in and out of the DOM with a square of square. #### `XyzTransitionGroup“ The XyzTransitionGroup` component is built on top of Vue.js. [`transition-group` component](https://vuejs.org/v2/api/#transition-group) It is used to animate groups of elements inside and outside the pages. Below is an example of using the `XyzTransitionGroup` component in Vue.js. Notice again that many of the complications that come with Vue.js’ “transition group” component have been eliminated to reduce complexity and increase performance. When using the ‘XyzTransitionGroup’ component, we need to make sure that there are ‘visible’, ‘visible’, ‘duration’, and ‘tags’. The following is taken. [from the documentation](https://animxyz.com/docs#vue-xyz-transition-group):

<XyzTransitionGroup
  appear={ boolean }
  appear-visible={ boolean | IntersectionObserverOptions }
        duration={ number | 'auto' | { appear: number | 'auto', in: number | 'auto',
                   out: number | 'auto' } }
        tag={ string } >
        <child-component />
        <child-component />
        <child-component />
</XyzTransitionGroup>

### Create an animated modal with AnimXYZ and Vue.js Let’s create modal components that will exit as soon as you enter the DOM. Here is a demo of what we are going to build:

Demo
Demo

Adding the `xyz =” fade out-delay-5 “property to the XyzTransition` component will remove the modal. Notice that we are adding `.xyz-nested` to almost all child elements of the modal component. This is because we want to animate their dynamics when a modal component element is open. The ‘easily out’ property that we have added to the dialog container will be slightly enhanced when the dialog opens and when it is closed. Adding “delay” to the child elements of the modal component will make the animation feel more natural, as the element will be delayed until other modal contents are activated:

  <section class="xyz-animate">
    <div class="alerts__wrap copy-content">
      <div class="alert reduced-motion-alert">
        <p>
          AnimXYZ animations are disabled if your browser or OS has
          reduced-motion setting turned on.
          <a href="https://web.dev/prefers-reduced-motion/" target="_blank">
            Learn more here.
          </a>
        </p>
      </div>
    </div>
    <h1>Modal Animation With AnimXYZ and Vue.js</h1>
    <button
      class="modal-toggle modal-btn-main"
      data-modal-text="Open Modal"
      data-modal-title="Title"
      data-modal-close-text="Close"
      id="label_modal_kdf8e87cga"
      aria-haspopup="dialog"
      ref="openButton"
      @click="open"
      autofocus
    >
      Open Modal
    </button>
    <span
      id="js-modal-overlay"
      class="simple-modal-overlay"
      data-background-click="enabled"
      title="Close this window"
      v-if="isModal"
      @click="close"
    >
      <span class="invisible">Close this window</span>
    </span>
    <div
      role="dialog"
      class="simple-modal__wrapper"
      aria-labelledby="modal-title"
    >
      <XyzTransition duration="auto" xyz="fade out-delay-5">
        <section
          id="modal1"
          aria-labelledby="modal1_label"
          aria-modal="true"
          class="modal xyz-nested"
          xyz="fade small stagger ease-out-back"
          v-if="isModal"
          tabindex="-1"
          ref="modal"
          @keydown.esc="close"
        >
          <div class="modal_top flex xyz-nested" xyz="up-100% in-delay-3">
            <header
              id="modal1_label modal-title"
              class="modal_label xyz-nested"
              xyz="fade right in-delay-7"
            >
              Join our community on Slack
            </header>
            <button
              type="button"
              aria-label="Close"
              xyz="fade small in-delay-7"
              class="xyz-nested"
              @click="close"
              title="Close"
            >
              <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                <path
                  fill="currentColor"
                  d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"
                ></path>
              </svg>
            </button>
          </div>
          <div class="modal_body xyz-nested" xyz="up-100% in-delay-3">
            <div class="modal_body--top flex justify_center align_center">
              <img
                src="../assets/slack.png"
                alt="slack logo"
                class="slack_logo"
              />
              <img src="../assets/plus.png" alt="plus" class="plus" />
              <img
                src="../assets/discord.png"
                alt="discord logo"
                class="discord_logo"
              />
            </div>
            <p><span class="bold">929</span> users are registered so far.</p>
          </div>
          <form class="modal_form" autocomplete>
            <label for="email"
              ><span class="sr-only">Enter your email</span></label
            >
            <input
              id="email"
              type="email"
              placeholder="johndoe@email.com"
              autocomplete="email"
              aria-describedby="email"
              class="modal_input"
              required
            />
            <button type="submit" class="modal_invite_btn">
              Get my invite
            </button>
            <p>Already joined?</p>
            <button
              type="button"
              aria-describedby="open_slack"
              class="
                modal_slack_btn
                flex
                align_center
                justify_center
                xyz-nested
              "
              xyz="fade in-right in-delay-7"
              id="open_slack"
            >
              <span
                ><img src="../assets/slack.png" alt="slack logo" role="icon"
              /></span>
              Open Slack
            </button>
          </form>
        </section>
      </XyzTransition>
    </div>
  </section>

Then, in our modal, we will use the ‘v-if = “isModal’ ‘instruction to specify that we want the modal page to be hidden by default. Then, when the button is clicked, we Open the modal by calling the `open ()` method, which sets the `isModal` property to` true ‘. Specified using built-in utilities.

<script>
export default {
  data() {
    return {
      isModal: false,
    };
  },
  methods: {
    open() {
      if (!this.isModal) {
        this.isModal = true;
        this.$nextTick(() => {
          const modalRef = this.$refs.modal;
          console.log(modalRef);
          modalRef.focus();
        });
      }
    },
    close() {
      if (this.isModal) {
        this.isModal = false;
        this.$nextTick(() => {
          const openButtonRef = this.$refs.openButton;
          openButtonRef.focus();
        });
      }
    },
  },
};
</script>

Animation XYZ animation is disabled when low motion setting is turned on in the browser or operating system. Let’s show a helpful message to users who have chosen to move less. @ Using the media screen and (preferably low motion) media query, we will display a message informing these users that they have turned off the animation feature in our modal component. To do this, add the following code block to your style:

<style>
@media (prefers-reduced-motion: reduce) {
  .alerts__wrap {
    display: block;
  }
}
</style>
AnimXYZ animation when low motion setting is on.
AnimXYZ animation when low motion setting is on.

Result

We’ve gone through the basics of AnimXYZ and how to use it with simple HTML and Vue.js. We’ve also implemented some demo projects that give us a glimpse of the range of CSS animations that we can create by incorporating the composable utility classes provided by this toolkit, and all this without Write a line of SS frame. Hopefully, this tutorial has provided you with a solid foundation for adding some sleek CSS animations to your own projects and building them for any of your needs over time.

The last demo is on Gut Hub. Feel free to clone it and try out the toolkit for yourself.

Just for now! Let me know what you think of this article in the comments section below. I am active. Twitter And gut hub. Thank you for reading, and stay tuned.

references

Breaking editorial.(ks, vf, yk, il, al)

Write a Comment

Your email address will not be published. Required fields are marked *