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

Overview

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

Comments
  • Module not found: Can't resolve 'atropos/react'

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

    opened by FranckPoingt 4
  • Import library issue

    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"

    opened by razekteixeira 3
  • Help with installing into Nuxt.js

    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 🙏🏞

    opened by 8BitJonny 2
  • A small delay before beginning rotating

    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?

    opened by toverux 2
  • fix: add variable for linux

    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.

    opened by defunty 1
  • scripts/watch.js is not working on linux

    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
    opened by defunty 1
  • Svelte Support

    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
    feature request 
    opened by mawoka-myblock 1
  • SvelteKit: build fails with

    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
    Svelte 
    opened by YtGz 0
  • Official website have a code error(in https://atroposjs.com/docs/vue)

    Official website have a code error(in https://atroposjs.com/docs/vue)

    Check that this is really a bug

    • [X] I confirm

    Reproduction link

    https://atroposjs.com/docs/vue

    Bug description

    image 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
    Vue 
    opened by 3420580499 0
  • Lighthouse returns error

    Lighthouse returns error "Does not use passive listeners to improve scrolling performance"

    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. image 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
    opened by CKGrafico 0
  • Popping behavior

    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
    opened by kylemcdonald 1
  • Firefox not working

    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
    opened by juanboardera 6
  • Angular support

    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
    feature request 
    opened by sytzez 4
Releases(v1.0.2)
  • v1.0.2(Feb 17, 2022)

  • v1.0.1(Oct 28, 2021)

    • new alwaysActive parameter to keep Atropos "activated"/"entered" all the time
    • new stretchZ parameter to set translateZ offset for multiple Atropos elements in same container (with same eventsEl)
    • new commonOrigin parameter for multiple Atropos elements in same container (with same eventsEl)
    • remove rotateLock functionality in favor of new smooth rotation (0ba0d06)
      • removed durationEnter parameter
      • removed durationLeave parameter
      • removed rotateLock parameter
      • added single duration parameter (defaults to 300)
    Source code(tar.gz)
    Source code(zip)
Owner
Vladimir Kharlampidi
Front-end engineer. Creator of Framework7 and Swiper
Vladimir Kharlampidi
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more.

vue-picture-input Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more. Installation npm

Robert 0 Jun 14, 2018
Friendly Captcha component for Vue 2 and 3

Vue Friendly Captcha Wrapper component library for Friendly Challenge. Works with Vue 2 and 3. Getting Started 1. Install the package Vue 2.x: npm ins

Somus 6 Jun 14, 2022
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation

vue-picture-input Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more. Installation npm

C.H Lee 0 Sep 24, 2019
A JavaScript Image Browser written in VueJS and styled with TailwindCSS

An Image Browser Component Built with VueJs A JavaScript Image Browser written in VueJS and styled with TailwindCSS. Features Image Upload Local or Re

Akash Mitra 11 Mar 31, 2022
Lightweight and simple image gallery component for Vue.js

vue-image-box Description Lightweight and simple-ish image gallery component for Vue.js. Images can also be cycled through using the left & right arro

Adam Romig 2 Oct 3, 2021
A lightweight image, video and iframe lightbox gallery component for Vue

A lightweight image, video and iframe lightbox gallery component for Vue. Supports slide, zoom, rotation, autoplay, captions and so on.

Mervin 3 Aug 30, 2022
JavaScript image viewer.

Viewer.js JavaScript image viewer. Website jquery-viewer - A jQuery plugin wrapper for Viewer.js. Table of contents Features Main Getting started Keyb

Fengyuan Chen 6.9k Nov 27, 2022
A vue component that allows your images to open in full size.

vue-expandable-image Allows your images to open in full size. Demo Preview Setup npm install vue-expandable-image You have two ways to setup vue-expa

Taha Shashtari 28 Oct 16, 2022
Vue Prettybox - a tool dependency that allows you to open or zoom image just by click it

Vue Prettybox - a tool dependency that allows you to open or zoom image just by click it. It helps you to view the image to have a better look of it without making zoom in on your browser.

Israel De Castro A. 2 Aug 7, 2022
Source code for TSUYOSHI OCHIAI PHOTOGRAPHY (https://occhi.jp/photo)

tsuyoshi-ochiai-photography Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production np

Tsuyoshi OCHIAI 0 Jan 22, 2022
A simple Vue component that creates an SVG-powered triangle. Combine them to create interesting content separators!

vue-triangle-separator Quickly add full-bleed SVG-powered triangle separators to your page.

HoldTheLine 3 Dec 28, 2021
Lightweight responsive image zoom component for Vue.js 2

Vue Image Zoomer Lightweight responsive image zoom component for Vue.js 2, that also works on touch devices. Perfect for zooming on product images on

Sam Jones 34 Nov 24, 2022
A lightweight lightbox inspired component for Vue.js

A lightweight lightbox inspired component for Vue.js

我æ˜ŊįŽĻč›‹å°æ‰æ‹… 0 May 28, 2021
A Vue.js port of Boring Avatars, a JS library that generates custom, SVG-based, round avatars from any username and color palette.

A Vue.js port of Boring Avatars, a JS library that generates custom, SVG-based, round avatars from any username and color palette.

Mujahid Anuar 74 Nov 4, 2022
A simple gallery library for vue, and for you to fuck!

A simple gallery library for vue, and for you to fuck!

Ann Ann 12 Jun 26, 2022
A gallery library for vuejs with a modern design and automatic image optimisation

Nuxt Gallery A gallery library for nuxt with a modern design and automatic image optimisation. How it works: On compile time the images of the gallery

Jonathan Treffler 3 Jan 1, 2022
ðŸŽĻ A vue directive for the cosha library

vue-cosha Vue cosha is a simple port of the cosha library for ease of use in Vue projects. "Colorful shadows for your images. ?? " cosha lets you add

Josh King 78 Oct 25, 2022
A Vue version of an excellent peity library for beautiful mini svg graphs.

Peity A Vue version of an excellent peity library for beautiful mini graphs.

null 64 Sep 8, 2022
A simple Vue library of Image Card components with awesome CSS animation

This is a set of Vue Image card components for special purposes. Each components come with props and slots for easy customization. The CSS animation make it awesome, thanks to the developer community.

Manoj AP 0 Jul 14, 2021