Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.

Last update: Jun 20, 2022

Atropos

Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.

Available for JavaScript, React and Vue.js

Community

The Atropos community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects

Our Code of Conduct applies to all Atropos community channels.

Dist / Build

On production use files (JS and CSS) only from package/ folder, there will be the most stable versions, build/ folder is only for development purpose.

Development Build

Install all dependencies, in repo's root:


$ npm install

And build development version of Atropos:


$ npm run build:dev

The result is available in build/ folder.

Running demos:

All demos located in ./playground folder. There you will fine Core (HTML, JS), React, Vue, Svelte and Angular versions. To open demo, run:

  • Core: npm run core
  • React: npm run react
  • Vue: npm run vue

Production Build


$ npm run build:prod

Production version will available in package/ folder.

Contributing

All changes should be committed to src/ files only. Before you open an issue please review the contributing guideline.

GitHub

https://github.com/nolimits4web/atropos
Comments
  • 1. Module not found: Can't resolve 'atropos/react'

    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'.

    Reviewed by Frhazz at 2021-07-28 02:59
  • 2. Import library issue

    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"

    Reviewed by razekteixeira at 2021-07-05 09:36
  • 3. Help with installing into Nuxt.js

    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 ๐Ÿ™๐Ÿผ

    Reviewed by 8BitJonny at 2021-10-26 14:50
  • 4. A small delay before beginning rotating

    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.

    Peek 01-07-2021 11-48

    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?

    Reviewed by toverux at 2021-07-01 09:57
  • 5. fix: add variable for linux

    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.

    Reviewed by defunty at 2022-01-05 14:47
  • 6. scripts/watch.js is not working on linux

    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
    Reviewed by defunty at 2022-01-05 14:10
  • 7. Svelte Support

    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
    Reviewed by mawoka-myblock at 2021-10-04 15:19
  • 8. SvelteKit: build fails with "Unknown file extension '.svelte'"

    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
    Reviewed by YtGz at 2022-02-16 19:50
  • 9. Popping behavior

    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
    Reviewed by kylemcdonald at 2022-02-23 20:33
  • 10. Firefox not working

    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
    Reviewed by juanboardera at 2021-11-12 16:47
  • 11. Angular support

    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
    Reviewed by sytzez at 2021-11-02 07:49
๐Ÿ‘€ Easily apply tilt hover effect on React components - lightweight/zero dependencies
๐Ÿ‘€  Easily apply tilt hover effect on React components - lightweight/zero dependencies

React Tilt ?? Easily apply tilt hover effect on React components Demo ?? Install npm install react-parallax-tilt Features Lightweight (3.8kB), zero de

Jun 20, 2022
Easiest way to add scroll parallax effect on the component
Easiest way to add scroll parallax effect on the component

React Parallax Component Easiest way to add scroll parallax effect on the component. Installation npm install react-parallax-component Usage import Pa

May 22, 2022
๐ŸŒŠ A springy, composable parallax-scroller for React
๐ŸŒŠ A springy, composable parallax-scroller for React

?? A springy, composable parallax-scroller for React

Jun 25, 2022
A React Component for parallax effect

react-parallax Install yarn add react-parallax Demo on codesandbox Contribute If you find any bug or have problems and/or ideas regarding this library

Jun 22, 2022
Open source, production-ready animation and gesture library for React
Open source, production-ready animation and gesture library for React

An open source and production-ready motion library for React on the web. Motion is an open source, production-ready library that's designed for all cr

Jun 18, 2022
Scroll, Refraction and Shader Effects in Three.js and React
Scroll, Refraction and Shader Effects in Three.js and React

Scroll, Refraction and Shader Effects in Three.js and React Discover how to use react-three-fiber and combine some common techniques to create a Three

Jun 21, 2022
Customizable Shimmer effects for React

Customizable Shimmer effects for React

May 23, 2022
React Glitch effects

React glitch-effect-components DEMO Squiggly Glitch Component import GlitchSquiggly from 'react-glitch-effect/core/GlitchSquiggly'; Props Name Type De

Jun 20, 2022
WebGL effects for React elements
WebGL effects for React elements

REACT-VFX: WebGL effects for React elements!! Install npm i -S react-vfx Usage REACT-VFX exports VFXSpan, VFXImg and VFXVideo. These components works

Jun 14, 2022
๐Ÿ“ท A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
๐Ÿ“ท A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.

react-spring-lightbox React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations. Doc

Jun 11, 2022
๐Ÿ‘‡Bread n butter utility for component-tied mouse/touch gestures in React
๐Ÿ‘‡Bread n butter utility for component-tied mouse/touch gestures in React

??Bread n butter utility for component-tied mouse/touch gestures in React

Jun 15, 2022
A powerful, flexible, lightweight and animated vertical news ticker component for React.
A powerful, flexible, lightweight and animated vertical news ticker component for React.

React Advanced News Ticker A powerful, flexible and animated vertical news ticker plugin for React. React Advanced News Ticker provides multiple callb

May 24, 2022
React typing animation in ~400 bytes ๐Ÿก of JavaScript.
React typing animation in ~400 bytes ๐Ÿก of JavaScript.

react-typical React Animated typing in ~400 bytes ?? of JavaScript. DEMO Based on awesome typical library by @camwiegert Youtube Video Tutorial Instal

Jun 16, 2022
JavaScript implementation of the Web Animations API

What is Web Animations? A new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animation

Jun 25, 2022
Track the position of DOM elements. Create cool animations.

react-track Avoid it if you can, but for a certain class of (mostly animation-related) problems, you need to query the DOM. This library provides a wa

May 22, 2022
Create frame-based animations in React
Create frame-based animations in React

React Keyframes A React component for creating frame-based animations. Example The following example will render contents in Frame one at a time every

Jun 7, 2022
Project build: REACT CREATE APP / REDUX / REDUX-TOOLKIT / REACT-SPRING / SCSS

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template. designed by Om Arya Available Scripts In the project

Jun 22, 2022
Simple React.js wrapper for StPageFlip library, for creating realistic and beautiful page turning effect
Simple React.js wrapper for StPageFlip library, for creating realistic and beautiful page turning effect

Version 2.0.0 This version fixed some bugs and is completely written with react hooks. !!! Method access api changed !!! React.js wrapper for StPageFl

Jun 10, 2022