search

ingram-projects / animxyz

The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
https://animxyz.com
MIT License
2.42k stars 56 forks source link

Gridsome setup not working in production #20

Closed Sananes closed 3 years ago

Sananes commented 3 years ago

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!

milesingrams commented 3 years ago

Hi Sananes, thanks for the kind words and for trying out our library! That's very odd that Gridsome would work in development and not in production using that setup. What you have is the same as the code we use in our gridsome setup. (We import the CSS in our sass code so you wont see import '@animxyz/core' in the file but its basically the same.)

Here is our entry file: https://github.com/ingram-projects/animxyz/blob/master/docs/src/main.js

Is it possible the CSS is not getting loaded properly or perhaps you are using CSS purge? One way to check is to manually add the .xyz-in class in the chrome inspector to an element that should animate and seeing if it works.

Sananes commented 3 years ago

Thanks for the quick reply @milesingrams! I do have CSS Purge running and it was definitely the issue! Thanks for solving that for me, really appreciate the efforts!

Superb job honestly, one of the nicest libraries I've used. It almost reminds me of React Spring, but more intuitive to use.