I'm trying to replace isotope on my site for a grid of employees, and since replacing category filtering and instant search is pretty easy (I'm using vanilla js without libraries, only StimulusJS for structure), I just need something for the animation that happens when repositioning on filtering. In researching this, I found your css-tricks article and then a codepen demo that uses this library for filtering with categories. I forked that demo, and got to an implementation I can use in my application.
So far, so good. Now to get it into my app. But when doing proper importing, I can't get it to work. The pens were using the internal codepen "Add External Scripts" method with both the regular dist file and the web adapter with unpkg, which isn't an alternative for me in my app.
Here's what I've tried:
yarn add flipping (defaults to 1.1.0)
import Flipping from 'flipping' (fails silently; no console error but no animation either)
import { Flipping } from 'flipping' (Uncaught SyntaxError: import not found: Flipping)
import Flipping from 'flipping/dist/flipping.web' (almost works; see below EDIT: It works, I had a syntax error in my HTML)
various methods using require (none work)
yarn add flipping@next (version 2.0.0-3)
import Flipping from 'flipping' (SyntaxError: import not found: default)
import { Flipping } from 'flipping' (fails silently; no console error but no animation either)
import Flipping from 'flipping/dist/flipping.web' (adapter doesn't exist in version 2)
import Flipping from 'flipping/dist/flipping' (really long TypeError message)
Importing the web adapter almost works, but only one element is animated when repositioning. This is not like the codepen, where all elements slide nicely into their new positions. I assume something from the main lib is missing since only the adapter is imported? EDIT: It works, I had a syntax error in my HTML
Any ideas to fix this? I'm very happy with this library the way it works in the codepen demo, so I'd love to use this instead of rolling my own. Thanks! :)
PS: I'm using snowpack now, if it matters, but I couldn't get it to work with webpack either.
I'm trying to replace isotope on my site for a grid of employees, and since replacing category filtering and instant search is pretty easy (I'm using vanilla js without libraries, only StimulusJS for structure), I just need something for the animation that happens when repositioning on filtering. In researching this, I found your css-tricks article and then a codepen demo that uses this library for filtering with categories. I forked that demo, and got to an implementation I can use in my application.
So far, so good. Now to get it into my app. But when doing proper importing, I can't get it to work. The pens were using the internal codepen "Add External Scripts" method with both the regular dist file and the web adapter with unpkg, which isn't an alternative for me in my app.
Here's what I've tried:
yarn add flipping(defaults to 1.1.0)import Flipping from 'flipping'(fails silently; no console error but no animation either)import { Flipping } from 'flipping'(Uncaught SyntaxError: import not found: Flipping)import Flipping from 'flipping/dist/flipping.web'(almost works; see belowEDIT: It works, I had a syntax error in my HTML)require(none work)yarn add flipping@next(version 2.0.0-3)import Flipping from 'flipping'(SyntaxError: import not found: default)import { Flipping } from 'flipping'(fails silently; no console error but no animation either)import Flipping from 'flipping/dist/flipping.web'(adapter doesn't exist in version 2)import Flipping from 'flipping/dist/flipping'(really long TypeError message)I've also tried various tricks for using import when the library doesn't really support it, like this method: https://github.com/snowpackjs/snowpack/discussions/2338. Didn't work.
Importing the web adapter almost works, but only one element is animated when repositioning. This is not like the codepen, where all elements slide nicely into their new positions. I assume something from the main lib is missing since only the adapter is imported?EDIT: It works, I had a syntax error in my HTMLAny ideas to fix this? I'm very happy with this library the way it works in the codepen demo, so I'd love to use this instead of rolling my own. Thanks! :)
PS: I'm using snowpack now, if it matters, but I couldn't get it to work with webpack either.