The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.

Overview

AnimXYZ Logo

AnimXYZ

npm version

animxyz.com

AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.

For example here is how you make an element fade and shrink in from above:

<div class="xyz-in" xyz="fade up big">I will animate in!</div>

Changing the class to xyz-out reverses the direction of the animation:

<div class="xyz-out" xyz="fade up big">I will animate out!</div>

See it in action here

For simple animations, that's all you need, but AnimXYZ can do so much more! Check out the AnimXYZ docs!


Installation

Using a package manager

AnimXYZ can be installed using your favorite package manager:

# with npm
npm install @animxyz/core

# with yarn
yarn add @animxyz/core

After installation, you will need to import AnimXYZ into your project.

Import into a Webpack project

If your Webpack project uses css-loader you can import the CSS by putting this snippet anywhere in your javascript code:

import '@animxyz/core'

Import into a SASS project

AnimXYZ is built in SASS and provides useful functions and mixins for customization. Import it anywhere in your SASS code:

// Import the functions/mixins
@import '@animxyz/core';

// Add all the core/utilities selectors
@include xyz-all;
// --- Or for more control and granularity ---
@include xyz-core;
@include xyz-utilities;

Using jsDelivr

To add AnimXYZ using a CDN put this link in the <head> of your index.html file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/[email protected]/dist/animxyz.min.css">

Vue & React

If you are using AnimXYZ in a Vue or React project we strongly recommend you also use our AnimXYZ components. To add those, follow the installation instructions in the relevant sections Vue and React.


Made By

Miles Ingram • GitHubWebsite

Mattan Ingram • GitHubWebsite

Comments
  • nuxt support ?

    nuxt support ?

    Hi, does animxyz support nuxt ? I'm unable to use it

    I tried with a plugin

    import Vue from 'vue'
    import VueAnimXYZ from '@animxyz/vue'
    
    Vue.use(VueAnimXYZ)
    

    and import from CDN but there is no animations at all

    <template>
      <div>
        <input type="button" value="test" @click="show = !show" />
        <XyzTransition xyz="fade">
          <div class="square" v-if="show">test</div>
        </XyzTransition>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          show: true,
        };
      },
    };
    </script>
    
    <style scoped>
    .square {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    </style>
    

    and that is the rendered DOM

    <div data-v-2a183b29=""
        <input type="button" value="test" data-v-2a183b29="">
        <div data-v-2a183b29="" xyz="fade" class="square xyz-in-to">test</div>
    </div>
    

    as you can see the xyz property is correctly applied

    enhancement 
    opened by flapili 13
  • XyzTransition doesn't inherit or apply attributes

    XyzTransition doesn't inherit or apply attributes

    Hey buddy,

    Sorry to be a pain again. One thing I've noticed. I'm trying to come up with a component that includes both XyzTransition and XyzTransitionGroup. The problem is, the XyzTransition doesn't apply the v-observe-visibility directive argument. But for XyzTransitionGroup it seems to work just fine.

    If I wrap this entire component in a div and add the directive there, it works. Only issue is I now will always have an extra div placed in there, which is not ideal.

    Would love to know your thoughts?

    I've set the component up like this:

    components/Animation.vue

    <template>
      <component
        v-bind:is="group ? 'XyzTransitionGroup' : 'XyzTransition'"
        v-bind="this.$attrs"
        v-bind:on="this.$listeners"
        v-observe-visibility="{ callback: visiblityChanged, ...options }"
      >
        <slot v-if="isVisible" />
      </component>
    </template>
    
    <script>
    export default {
      name: 'Animation',
      props: {
        // Options for vue observer
        options: {
          type: Object,
          default: () => {},
          required: false,
        },
        // Wether its a group transition
        group: {
          type: Boolean,
          required: false,
        },
      },
      data() {
        return {
          isVisible: false,
        }
      },
      methods: {
        visiblityChanged(isVisible, event) {
          this.isVisible = isVisible
        },
      },
    }
    </script>
    

    Again, thanks for all your help!

    enhancement 
    opened by Sananes 8
  • Importing library into Sass files throws error:

    Importing library into Sass files throws error:

    I've been trying to import the @import '@animxyz/core' and for some reason get the following error:

    ERROR in ./src/assets/style/index.scss (./node_modules/css-loader/dist/cjs.js??ref--4-oneOf-1-1!./node_modules/postcss-loader/src??ref--4-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/style-resources-loader/lib??ref--4-oneOf-1-4!./src/assets/style/index.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: no mixin named xyz-core
            on line 12 of node_modules/@animxyz/core/src/animxyz.scss, in mixin `xyz-all`
            from line 2 of src/assets/style/general/_animations.scss
            from line 1 of src/assets/style/general/index.scss
            from line 8 of C:\Users\san\Projects\untitled-project\web\src\assets\style\index.scss
    >>   @include xyz-core;
    
       -----------^
    

    Not quite sure what the issue is.

    Any help will be appreciated, thanks again!

    bug 
    opened by Sananes 7
  • Hydration error for XyzTransition and XyzTransitionGroup in Nuxt static mode

    Hydration error for XyzTransition and XyzTransitionGroup in Nuxt static mode

    Hello, when I compile my Nuxt app in static mode (nuxt generate), the XyzTransition and XyzTransitionGroup elements are compiled to xyztransition and xyztransitiongroup, which are not valid HTML, causing an hydration error in dev mode and a "Failed to execute 'appendChild' on 'Node'" error when serving the compiled project with a static web server.

    Vue's Transition and TransitionGroup elements are compiled to div and span respectively so they work out of the box in Nuxt.

    I installed AnimXYZ in my project following the docs and everything else works, but I need to use the 'appear-visible' feature so I need XyzTransitionGroup.

    opened by tanguyMichardiere 5
  • No declaration file for Module @animxyz/vue3

    No declaration file for Module @animxyz/vue3

    Hey, I followed you instructions on your Docs for setting up AnimXYZ with Vue 3 (and Tailwind 2) and was running into the following error:

    ERROR in src/main.ts:6:24
    TS7016: Could not find a declaration file for module '@animxyz/vue3'. 'C:/Development/projects/musicxml-analyzer-app/node_modules/@animxyz/vue3/dist/VueAnimXyz.cjs.js' implicitly has an 'any' type.
      Try npm install @types/animxyz__vue3 if it exists or add a new declaration (.d.ts) file containing declare module '@animxyz/vue3';
        4 | import store from "./store";
        5 | import "./tailwind.css";
      > 6 | import VueAnimXYZ from '@animxyz/vue3'
          |                        ^^^^^^^^^^^^^^^
        7 | import '@animxyz/core' ;
        8 | 
        9 | createApp(App)
    

    May it be that the Vue 3 support is not complete at the moment or did I forget somethin in the setup? If you need further information, just let me know.

    Some help would be appreciated!

    bug 
    opened by DiemoHeuer 5
  • Maintain the height of an element when it is out with Vue

    Maintain the height of an element when it is out with Vue

    Hello, I use AnimXYZ in my Vue project. I made a component to trigger the animation when scrolling using the Intersection Observer API but my problem is that AnimXYZ reduces the element where I have v-if="show" when it's false. Is it possible to keep the height of the original element and the animation ?

    opened by florian-lefebvre 5
  • nested + staggered start the animation of the second parent only when the first has finish ?

    nested + staggered start the animation of the second parent only when the first has finish ?

    Hi, I would like to know if there is a possibilty to start the animation of a second parent only when the animation of the parent and their child as finished.

    My case is animate each letter of a title but I can't just loop over the title because of the wrap: image in the screen the world "itérateurs" should be wrapped in the next line.

    my current code is:

                    <XyzTransitionGroup
                      appear
                      xyz="fade small up stagger duration-30"
                    >
                      <div
                        v-for="(word, i) in article.title.split(' ')"
                        :key="`title-${i}`"
                        style="display: inline"
                      >
                        <template v-if="i != 0">&nbsp;</template
                        ><span
                          v-for="(char, i2) in word"
                          :key="`title-${i}-${i2}`"
                          class="xyz-nested"
                          :ref="`title-${i}-${i2}`"
                          >{{ char }}</span
                        >
                      </div>
                    </XyzTransitionGroup>
    
    question 
    opened by flapili 5
  • Change default perspective to none

    Change default perspective to none

    Since firefox (93) there are slight change that perspective(0) and perspective(none) are not equal but other browsers take them as the same. And in firefox animations are actually glitchy.

    Here's all explained https://bugzilla.mozilla.org/show_bug.cgi?id=1734999

    opened by xxSkyy 4
  • tree shake? purge css support

    tree shake? purge css support

    nice utility, but ads 10kb to my js bundle (similar to tailwind, but i can purge that)

    anyway i can shake some off or purge the classes or js?

    Thanks R

    opened by ricky11 4
  • Mirrored Stagger?

    Mirrored Stagger?

    This would be more of an enhancement because I don't think this is possible and needed to make this. Is there a way to mirror staggers? What I mean is, if you have 5 list items then the xyz-index would be:

    1 2 3 4 5

    But I have an animation where I want them to transition mirrored from side to side so:

    1 2 3 2 1

    opened by DoradoFlamingo 4
  • the animations in the documentation right side are distracting

    the animations in the documentation right side are distracting

    Thanks for this awesome library, but there's something that annoys me which is the animations that play in the right side of documentation that could distract the reader, I suggest to add a play button, thanks again.

    enhancement 
    opened by boussadjra 4
  • Animations flickering in React 18

    Animations flickering in React 18

    When I changed code from ReactDOM.render to root.render, all animations appear buggy. Like element exists on the page and then dissapears.

    Anyone faced this issue?

    opened by rvision 2
  • ES Module issue with Nuxt 3

    ES Module issue with Nuxt 3

    In the current Nuxt 3 version, v3.0.0-rc.6, trying to import @animxyz/vue3 causes a warning and the server to stall out.

    Steps I took: init a new Nuxt 3 project with nuxi. run yarn add @animxyz/vue3. Then I added this code to the /plugins folder:

    import VueAnimXyz from '@animxyz/vue3'
    import '@animxyz/core'
    
    export default defineNuxtPlugin((nuxtApp) => {
        nuxtApp.vueApp.use(VueAnimXyz);
    })
    

    When the server is launched, the message in the console reads:

    (node:7804) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
    (Use `node --trace-warnings ...` to show where the warning was created)
    

    It then stalls out for a while. After a few minutes, the console shows this and crashes:

    <--- Last few GCs --->
    
    [7804:000002D00B683ED0]    79978 ms: Mark-sweep (reduce) 4116.1 (4121.3) -> 4088.6 (4094.1) MB, 7.5 / 0.0 ms  (average mu = 0.925, current mu = 0.945) allocation failure scavenge might not succeed        
    [7804:000002D00B683ED0]    80032 ms: Mark-sweep (reduce) 4116.4 (4121.8) -> 4116.4 (4121.6) MB, 12.6 / 0.0 ms  (average mu = 0.879, current mu = 0.767) allocation failure scavenge might not succeed       
    
    
    <--- JS stacktrace --->
    
    FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
     1: 00007FF7CC437A1F v8::internal::CodeObjectRegistry::~CodeObjectRegistry+114207
     2: 00007FF7CC3C6096 DSA_meth_get_flags+65542
     3: 00007FF7CC3C6F4D node::OnFatalError+301
     4: 00007FF7CCCFB2CE v8::Isolate::ReportExternalAllocationLimitReached+94
     5: 00007FF7CCCE58AD v8::SharedArrayBuffer::Externalize+781
     6: 00007FF7CCB88C7C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
     7: 00007FF7CCB85D94 v8::internal::Heap::CollectGarbage+4244
     8: 00007FF7CCB83710 v8::internal::Heap::AllocateExternalBackingStore+2000
     9: 00007FF7CCBA1420 v8::internal::FreeListManyCached::Reset+1408
    10: 00007FF7CCBA1AD5 v8::internal::Factory::AllocateRaw+37
    11: 00007FF7CCBB71AB v8::internal::FactoryBase<v8::internal::Factory>::NewRawOneByteString+75
    12: 00007FF7CC99AA2B v8::internal::String::SlowFlatten+395
    13: 00007FF7CC704C8B v8::internal::WasmTableObject::Fill+603
    14: 00007FF7CC8ECBC9 v8::internal::RegExp::ExperimentalOneshotExec+1161
    15: 00007FF7CC8EC687 v8::internal::RegExp::Exec+199
    16: 00007FF7CC8C853C v8::internal::DeclarationScope::was_lazily_parsed+21452
    17: 00007FF7CCD88FC1 v8::internal::SetupIsolateDelegate::SetupHeap+494417
    18: 00007FF7CCDE03B3 v8::internal::SetupIsolateDelegate::SetupHeap+851779
    19: 00007FF7CCD7CB44 v8::internal::SetupIsolateDelegate::SetupHeap+444116
    20: 000002D20D4BCCAC
    error Command failed with exit code 134.
    
    opened by towerhufham 5
  • chore(deps): bump moment from 2.29.1 to 2.29.4

    chore(deps): bump moment from 2.29.1 to 2.29.4

    Bumps moment from 2.29.1 to 2.29.4.

    Changelog

    Sourced from moment's changelog.

    2.29.4

    • Release Jul 6, 2022
      • #6015 [bugfix] Fix ReDoS in preprocessRFC2822 regex

    2.29.3 Full changelog

    • Release Apr 17, 2022
      • #5995 [bugfix] Remove const usage
      • #5990 misc: fix advisory link

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/moment/moment/security/advisories/GHSA-8hfj-j24r-96c4

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Does it work with react-router-dom v6+?

    Does it work with react-router-dom v6+?

    I'm struggling to make it work with react-router, what should XyzTransition wrap? thanks

    <BrowserRouter>
      <XyzTransition appear xyz="fade in-left-100% out-right-100%" mode="out-in">
        <div>
          <Routes>
            <Route path="/" element={<IndexPage />}>
              <Route path="settings" element={<SettingsPanel />} />
              <Route path="users" element={<UsersModal />} />
            </Route>
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </div>
      </XyzTransition>
    </BrowserRouter>
    
    
    
    opened by rvision 0
  • warning in console with vue3 + vite

    warning in console with vue3 + vite

    DevTools failed to load source map: Could not load content for http://localhost:5173/animxyz.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
    

    any help?

    opened by ortonomy 2
  • chore(deps): bump terser from 4.8.0 to 4.8.1

    chore(deps): bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Ingram Projects
Ingram Projects
:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

Aleksandr Komarov 4k Nov 29, 2022
Easily remove all refs from an object using the `deepUnref`-composable.

Vue - Deep Unrefs Similar to unref(), easily remove all refs recursively from an object using the deepUnref-composable. ?? Get Started Luckily, it's i

Open Web 4 May 19, 2022
Easily remove all refs from an object using the `deepUnref`-composable.

Vue - Deep Unrefs Similar to unref(), easily remove all refs recursively from an object using the deepUnref-composable. ?? Get Started Luckily, it's i

Open Web Foundation 4 May 19, 2022
🪅 Nuxt 3 module to connect with any API securely – server proxy & customizable composable names

nuxt-api-party This module provides composables to fetch data from an API of your choice securely. You can customize the composable names! Given json-

Johann Schopplich 52 Nov 22, 2022
Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | 简体中文 Talk is cheap,

Baidi Liu 185 Nov 26, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

Архипцев Евгений 64 Nov 25, 2022
Matteo Bruni 4.4k Nov 29, 2022
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Alan Morel 10 Oct 7, 2022
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

花裤衩 79.6k Nov 23, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 83 Nov 3, 2022
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Nov 30, 2022
A high quality UI Toolkit built on Vue.js 2.0

iView A high quality UI Toolkit built on Vue.js. Docs 3.x | 2.x | 1.x Features Dozens of useful and beautiful components. Friendly API. It's made for

iView 24k Nov 26, 2022
Lightweight Mobile UI Components built on Vue

Vant Mobile UI Components built on Vue ?? 文档网站(国内) ?? 文档网站(GitHub) ???? 中文版介绍 Features 65+ Reusable components 1kb Component average size (min+gzip) 9

有赞 20.5k Nov 25, 2022
A hackable slideshow framework built with Vue.js

Eagle.js - A slideshow framework for hackers Slideshow system built on top of the Vue.js Supports animations, themes, interactive widgets (for web dem

null 4.1k Nov 15, 2022
Admin dashboard template built with tailwindcss & vue-jsx.

K UI Admin Dashboard Template (Vue 3 & JSX) ⚠️ This template is not finished yet and still in design phase. We are building it in public. Live preview

Kamona-UI 4 Aug 14, 2022
NativeScript empowers you to access native api's from JavaScript directly. Angular, Vue, Svelte, React and you name it compatible.

NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile de

NativeScript 21.8k Nov 30, 2022
JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering

Handsontable 17.3k Nov 24, 2022