ingram-projects / animxyz Goto Github PK

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

I know that you cant really animate hiehgt, width changes performantly, but how would i go about a simlpe div that expands based on the content inside of it.

For example in Vue.

I have a

i would like to the container to animate growing to fill {{content}} based on the condition.

Suggestions?

Firstly! Big fan of AnimXYZ!

I just noticed when I tested in latest Safari that the text becomes blurry after an animation. If I remove the xyz-in class from the parent element which contains the xyz-in class, the child elements becomes sharp again. When using a chromium based browser the text stays sharp all the time.

In the screenshot below (safari blurry text.png) you can see all the text below the nav bar is blurry. All those text elements gets faded in when in viewport. In about 1 second after animation those text elements becomes blurry.

In the screenshot below (chrome not blurry.png) all the text elements stays sharp all the time.

In the screenshot below (safari fixed.png) you can see that I unchecked some css styles which the xyz-in class has applied. That seems to make the text sharp again.

My solution (hack) right now is to remove the xyz-nested class of all children elements after an animation has finished.

Otherwise I love the animxyz so far! :D

I can try it out on your site how the utilities "front" and "back" should work. But I cant get them to work. Here you can try it out: https://jsfiddle.net/sphcrfu3/

I have tried both the latest NPM package and the CDN. Both gets me the same results where it ignores the "back" and "front" utility.

When I write the following html it only seems to fade and not "zoom". It does not behave as the same html does on your playground on your site.

<div class="square-group" xyz="fade back-5">
  <div class="square xyz-in"></div>
  <div class="square xyz-in"></div>
  <div class="square xyz-in"></div>
</div>

Thanks!

Hi guys,

First of all, what a fantastic project this is. It's been so nice working with this on the development side, however when it comes to building to netlify it doesn't work in production.

I see you guys are using your library using Gridsome. I'm currently working in Gridsome and wanted to know if you could share how you set this up as I'm struggling to get it to work in production. It seems to me most of it has been loaded, but unfortunately none of the animations are applying. It's bizzare...

This is how I've currently set it up in my main.js:

import VueAnimXyz from '@animxyz/vue'
import '@animxyz/core'

export default function(Vue) {
  Vue.use(VueAnimXyz)
}

Any help at this point would be greatly appreciated!

Great work and look forward to hearing from you!

Hi
I have in vue

<XyzTransition
        appear
        xyz="fade in-left-25% out-right-25%"
        mode="out-in"
        duration="auto"
      >
        <router-view role="main"></router-view>
      </XyzTransition>

When page opened first time (initial) I don't want to see animation (fase-translation from left to right), but when I go to some route, I want to see that animation.
How to do that?
Another question, when I go back (with browser back button), I wan't to see inverse animation, but now I see the same animation.
Thanks!

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!

How disappointing to see the lack of support on one of the most loved web frameworks out there.

Nonetheless it's a fantastic effort and might change the css realm just like tailwindcss did.

It looks like the CDN version of animxyz was not correctly updated.
The result is all links pointing to the CDN for 0.6.1 are broken.
You can see for yourself here https://www.jsdelivr.com/package/npm/@animxyz/core the listed version is 0.6.0

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 ?

I see it's coming soon but not sure where to follow for updates

Hi,

I was trying out the react package for the AnimXYZ. Its really fun to play around. But I have a small query.

Does the element which we want to animate be block elements? Because when i animate a span element the animation doesnt work.

Looking forward from you!

Hey. I just want you to know, that on your Demo on your website, there is a bug.

I go to the bottom of your site, there is your Demo of "animxyz". If I choose "Timing" an any "Delay", the animation will continue.
If I enter a custom variable on "--xyz-delay" (while the upper box is selected), the animation will stop.

Maybe you can replicate this.

But I am really enjoying this project and I use it for a few projects now.

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.

Hey guys,

I'm currently having an issue where on initial render all elements that include the animxyz transition, first appears on intial render, then animxyz kicks in. Is this normal behavior?

You can see an example of this here: https://potpunks.io/home

I would expect it to automatically hide elements on initial render by default, then animate those elements in. Which causes a weird visial issue, where you see elements to begin with then you see it animate once it's loaded. More significant when you're using the fade animation.

I'm currently using nuxt for this project and not really sure if its to do with preloading animxyz first?

Thanks in advance!

I have been struggling trying to install this in a Rails project.

1. Installed the latest version. https://github.com/ingram-projects/animxyz/releases/tag/v0.6.4
2. I opened /core/build.scss and dragged it into the vendors/stylesheets directory

vendor/assets/stylesheets/animxyz

in app/assets/stylesheets/application.sass I used @import "animxyz/animxyz"

See #40

Would be great to automatically trigger animation on scroll through some extra config / props. This would be a great enhancement if I say so myself.

Does this work in other browsers? No - I can reproduce the problem in another browser just test it on firefox and it reproduce

Steps to reproduce the problem:

1. create a list of 2 general div HTML elements with some CSS animation on animation-play-state: paused or pause with devtool and attach some log to there above mention events
2. prepend another element div HTML elements

test working case are here: https://codesandbox.io/s/onanimationend-vanilla-8zeu1y?file=/index.html

Problem Description:
when element X prepend before an element Y with animation (paused), it triggers "onanimationend" on element Y. after the animation on Y real finish "onanimationend" trigger again
test working case are here: https://codesandbox.io/s/onanimationend-vanilla-8zeu1y?file=/index.html

``While trying to use a "custom" react component that handles grid layout, the docs state to use the display: contents attr if adding a "wrapper" around the child creates layout woes. In doing so, it still appears to mess with the layout AND does not animate.

Example:

<Grid sm={3} lg={11} gap="md">
  <XyzTransitionGroup appear xyz="fade left stagger">
    {featuredSubscriptions.map(sub => (
      <div key={sub.key} style={{ display: 'contents' }}>
        <Column lgStart={getColumnStarts(sub.subtype)} lgSpan={3}>
          <FeaturesCard
            img={getImage(sub.subtype)}
            currencyId={currencyId}
            title={featuresPricing[sub.subtype].title}
            term={sub.term}
            monthlyPrice={sub.monthlyprice}
            billingAtPrice={sub.price}
            sku={sub.value}
            features={featuresPricing[sub.subtype].features}
            btnText={btnText}
            handleCardClick={handleCardClick}
          />
        </Column>
      </div>
    ))}
  </XyzTransitionGroup>
</Grid>

This yields an 11 column grid with the first column starting in position 2. In fact, what happens is each column subsequently uses only 1 column worth of available space even when the specified span at the lg breakpoint is set to 3.

what am i missing?

Hi,

any intentions to creating adapter for Angular 8+ ?

Thank you.

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

Thank you for a great library.

There's currently no way to disable animations on mobile?
On desktop is fine to have many animations, but on mobile sometimes its nice to have more control, and disable certain animations.

How could it be done?

Hello!

First of I want to say that your project looks great!

I'm trying to get it work with react but i'm having trouble locally, so I created a CodeSandbox.

Here's what i've been doing, but nothing appears to be happening. I'm 100% doing something wrong, but I would greatly appreciate some help.

https://codesandbox.io/s/ecstatic-bash-26neo?file=/src/App.js

Using react router v6, adding the location prop to the Routes component tends to break the page.

Here's an example of the error

When overriding the location using "<Routes location>" or "useRoutes(routes, location)", the location pathname must begin with the portion of the URL pathname that was matched by all parent routes. The current pathname base is "/1" but pathname "/3" was given in the "location" prop.

Framework, vue 3.

version XYZ: v0.6.5

I have checked it with different devices:

• Android chrome: works

• Iphone safari: it works

• Iphone chrome: not working.

Mainly in the errors they are for the states "in-". the out if they work.

Hi.
I have wrong behavior when I use stagger with appear-visible.
Stagger make delay between each children, but if parent (in my case <XyzTransitionGroup /> (in Vue)) have appear-visible,
that behavior needed changes: delay needed to be calculated between visible items, not total items!
Why?
If you have 15 items, 3 items per row, and for example from the docs

<XyzTransitionGroup
          appear-visible
          xyz="fade front-3 flip-down-50% duration-10 stagger-5"
         class="row"
>
   <div
            v-for="(item, i) in items"
            :key="i"
   > ...
   </div>
</XyzTransitionGroup>

First 3 items appear normally,
second 3 items - ok.
But when user scroll page, next 3 items and other already have a noticeable delay in their general appearance (the delay between each other still corresponds to the one specified in the settings).

How to fix that?
Because of this, stagger for me is unusable for that case (is very common!).

Maybe you can achieve it quickly with https://github.com/antfu/vue-demi

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

When utilizing the appearVisible prop in the XyzTransitionGroup component, upon scrolling to elements beyond the viewport, the animation is not triggered when they come into view - elements have already had their animation run

 <XyzTransitionGroup appearVisible  className="card-section"  xyz="fade small out-down out-rotate-right appear-stagger stagger-1">
    {colours.map((data) => (
      <div key={data.id}>
        <ColourCard {...data} />
      </div>
    ))}
  </XyzTransitionGroup>

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!

Just an FYI, getting lots of rough animations because the right panel occasionally overflows and shows a horizontal scrollbar which ruins the otherwise slick effects.

One such spot this element:

Setting overflow to hidden makes the chat example smooth.

For the record, using Chrome Version 95.0.4638.69 (Official Build) (x86_64).

p.s. Awesome library and glad to have found it. And if you get to the point where you'd like to support an Angular library as part of this repo and could use some assistance, let me know. Cheers.

I just noticed that trying to work with the elements is broken in the latest variant of Vue 3.1.1.

In 3.0.5 you can see the element working with xyz-in/out classes, but with Vue 3.1.1 they seem to be overridden back to Vue's standard classes using v-enter-from/to so the css animations do not work. If you write down the classes such as xyz-in manually then the animations work nicely but defeats the purpose of working with Vue3.

What I did to reproduce this:

• Set up a new app using vite npm init @vitejs/app
• Selected a vue-ts app
• npm i
  -Added AnimXyz packages
• Set up Vue3 to use VueAnimXyz
• Animations broken if you try to fade something like the vue logo in App.vue
• Now force package.json to download Vue 3.0.5
• Animations work without changing the Vue template

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:

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>

I can't import animxyz to any of my project based on webpack,
adding with yarn then including in main.js file with import '@animxyz/core'

Throws:

 ERROR  Failed to compile with 1 error                                                                                                                  17:55:49

 error  in ./node_modules/@animxyz/core/dist/animxyz.css

Syntax Error: ParserError: Syntax Error at line: 1, column 37
    at Generator.next (<anonymous>)


 @ ./node_modules/@animxyz/core/dist/animxyz.css 4:14-145 15:3-20:5 16:22-153
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.0.0.56:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I tried with vue project, ruby on rails project, same thing same problem

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.

I know is experimental still but I wanted to report it here in case you knew what's up. But I'm having an issue where when I call a component that is wrapped in a tag, appear is not working with the child elements, only the root element triggered an animation. Is this known?

SassError: $color: var(--xyz-in-filter-grayscale, var(--xyz-filter-grayscale, 100%)) is not a color.
      ╷
51647 │     filter: grayscale(var(--xyz-in-filter-grayscale, var(--xyz-filter-grayscale, 100%)));
      │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

i am import

@import '@animxyz/core';

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

and angular will support come?

It would be nice if there was a "delay-parent" xyz attribute or something like that, for the child to take that delay as a reference.
For example:

<div xyz="delay-15 delay-parent" class="xyz-nested"> <!-- = delay-15 -->
      <div xyz="delay-3" class="xyz-nested"></div> <!-- = delay-18 -->
</div>

Hello, everytime there is modal in an component looks like xyz overrides it's z-index. When I comment out XyzTransition everything goes back to normal. Do you know what could be a problem? Thank you.

Every time I download/modify/delete a package or do anything with Yarn, I get a warning:

warning " > @animxyz/[email protected]" has unmet peer dependency "vue@^2.6.12". 

I am using Nuxt.js.

When I use Preact with Animxyz using preact/compat the animations just constantly go in and out when an animated element is supposed to exist

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

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!

They don't run both on ff and chrome.

petite-vue does not have vue transitions built in? in this case can i use it in normal html mode?

Hey
It would be so useful if you add the support of logical properties like (inline-start, inline-end, block-start, block-end) in addition to: top, left, right, bottom.

It would be useful in multilanguage websites to make consistent animations without making some weird hacks.

How to make the animation repeat again when the item re-appear in the viewport? So it's like make appear-visible not a once off thing.