Hi, I'm trying to implement Atropos in a project but it seems it can't find the module. I installed the package via npm i atropos and imported it in my component like indicated in the guide: import Atropos from 'atropos/react'.

Hi there!

I'm having troubles trying to use the library.

Just installed it on both vuejs and react fresh projects, but it seems to fail when trying to import the library. The package exists in the node_modules folder but it fails to import via

import Atropos from "atropos/react" or import Atropos from "atropos/vue"

Nuxt.js Installation: Help Wanted

Hey 👋🏼 I know this is not the really a good kind of issue that I'm creating here, but since this amazing project is still relatively unknown and I couldn't find any help anywhere else on the web, I though I'd post it here. But please close this issue if you don't want this type of "Help wanted" issue

I can't get your library installed with nuxt.js. I spend a few days already and thought, I'd see if anyone here can get it to work.

Problem

It is always saying

This dependency was not found:
* atropos/css
* atropos/vue

Problem Demonstration

https://codesandbox.io/s/broken-smoke-bjh6y?file=/nuxt.config.js This is a sandbox demonstrating my issue.

Anyone help is much appreciated 🙏🏼

Hi, thanks for your amazing library, I integrated it in a few minutes in a landing page and it's effectively stunning at low cost.

I noticed that there is a short delay when the mouse hovers a mariko block, where no rotation happens. First the block scales, then rotation happens according to mouse movements. It's not long, but it can definitely be felt.

I guess this delay is not tight to the scaling though, since disabling the offset/duration properties don't have an impact on this. I thought it might be on purpose, to avoid too much movement eg. if the user is hovering multiple mariko'ed blocks when moving its cursor across the page.

However, in my use cas, it feels less natural. Can it be disabled, if that's technically possible?

https://github.com/nolimits4web/atropos/issues/15

I add a variable recursive so that fs.watch with recursive has problems on linux and node >= 14. https://github.com/nodejs/node/issues/36005 https://github.com/wclr/ts-node-dev/issues/143

This is working well on Ubuntu 20.04.3 LTS.

Check that this is really a bug

• [x] I confirm

Reproduction link

I don't know how to show reproducing the problem, but fs.watch with recursive isn't unavailable on linux as a fact.

https://github.com/nodejs/node/issues/36005

Bug description

My environment is Ubuntu 20.04.3 LTS. When I executed npm run watch:dev, this error has been thrown.

npm run watch:dev

> [email protected] watch:dev
> cross-env NODE_ENV=development node scripts/watch

Watching file changes ...
node:fs:2245
    throw new ERR_FEATURE_UNAVAILABLE_ON_PLATFORM('watch recursively');
    ^

TypeError [ERR_FEATURE_UNAVAILABLE_ON_PLATFORM]: The feature watch recursively is unavailable on the current platform, which is being used to run Node.js
    at new NodeError (node:internal/errors:371:5)
    at Object.watch (node:fs:2245:11)
    at Object.<anonymous> (/home/yusuke/Documents/work_project/app_defunty/portfolio/aaa/atropos/scripts/watch.js:47:4)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'ERR_FEATURE_UNAVAILABLE_ON_PLATFORM'
}

Atropos version

1.0.1

Platform/Target and Browser Versions

Ubuntu 20.04.3 LTS

Validations

• [x] Follow our Code of Conduct.
• [x] Read the docs.
• [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [x] Make sure this is a Atropos issue and not a framework-specific issue.

Would you like to open a PR for this bug?

• [x] I'm willing to open a PR

Clear and concise description of the problem

Support for Svelte so I can use it how I could use it with Vue or React

Suggested solution

Add support for Svelte

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR

Check that this is really a bug

• [X] I confirm

Reproduction link

https://github.com/YtGz/atropos-unknown-extension-svelte

Bug description

When trying to run a production build of a sveltekit project that uses Atropos, the following error message is shown:

Unknown file extension ".svelte" for (...)/node_modules/.pnpm/[email protected]/node_modules/atropos/svelte/atropos-svelte.svelte

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for (...)/node_modules/.pnpm/[email protected]/node_modules/atropos/svelte/atropos-svelte.svelte

Cf. also https://github.com/JustinVoitel/svelte-hero-icons/issues/18

Expected Behavior

No error

Actual Behavior

The following error:

Unknown file extension ".svelte" for (...)/node_modules/.pnpm/[email protected]/node_modules/atropos/svelte/atropos-svelte.svelte

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for (...)/node_modules/.pnpm/[email protected]/node_modules/atropos/svelte/atropos-svelte.svelte

Atropos version

1.0.1

Platform/Target and Browser Versions

n/a

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Atropos issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [X] I'm willing to open a PR

Check that this is really a bug

• [X] I confirm

Reproduction link

https://atroposjs.com/docs/vue

Bug description

The props attribute is written in the wrong position

Expected Behavior

No response

Actual Behavior

No response

Atropos version

1.0.2

Platform/Target and Browser Versions

window11 google

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Atropos issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

Check that this is really a bug

• [X] I confirm

Reproduction link

any lighthouse test

Bug description

Lighthouse throws an error avout addeventlistener on this line. https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=devtools

Expected Behavior

Don't have lightouse errors

Actual Behavior

No response

Atropos version

1.0.2

Platform/Target and Browser Versions

any

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Atropos issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

Check that this is really a bug

• [X] I confirm

Reproduction link

https://atroposjs.com/

Bug description

When a multi-component Atropos collection with a common eventsEl is moving, some of the elements will "pop" instead of smoothly animating. This manifests differently in different browsers. On Chrome the popping is with the scale of the element. On Safari the popping seems to be with the glare.

https://user-images.githubusercontent.com/157106/155403478-689bf63c-f65c-4967-ab44-2102c40dd683.mov

https://user-images.githubusercontent.com/157106/155403501-544484ec-9116-43c8-9834-6dd77706e8d9.mov

Expected Behavior

No response

Actual Behavior

No response

Atropos version

1.0.2

Platform/Target and Browser Versions

macOS: Chrome, Safari

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Atropos issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

Check that this is really a bug

• [X] I confirm

Reproduction link

https://atroposjs.com/

Bug description

Buttons are not working on Firefox. To reproduce, please go to Atropos website in Firefox and try to click "Get Started". The button won't be responsive.

Tested on Firefox 94.0.1, Windows

Expected Behavior

The button "Get Started" should be clickable in Firefox

Actual Behavior

The button does not do anything.

Atropos version

1.0.1

Platform/Target and Browser Versions

Firefox 94.0.1, Windows

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Atropos issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

Clear and concise description of the problem

It would be nice if the package came with an out-of-the-box Angular component, to make it easier and quicker to use in an Angular or Ionic project.

Suggested solution

I've already made a working Angular component. I would be willing to rewrite this so if fits with the main Atropos repo, and be available under atropos/angular.

Alternative

Alternatively I could keep maintaining my own package and keep it separate from the main one.

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [X] I'm willing to open a PR