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

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
Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos Swiper Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing

Vladimir Kharlampidi 33.7k Jan 4, 2023
Vue-cursor-fx - 🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible

?? Vue Cursor Fx An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible Installation This package is a

Luca Iaconelli 56 Aug 18, 2022
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
👓 Parallax tilt hover effect for React JS - tilt.js

React.js - Tilt.js React version of tilt.js Demo https://vx-demo.now.sh/gallery Install yarn: yarn add react-tilt npm: npm install --save react-tilt U

Jon 340 Dec 23, 2022
This project uses JavaScript to request resources from PokeApi and Involvement API to display a stunning website about Pokemons.

POKEDEX CAPSTONE Web page used to retrieve information about Pokemons using Pokeapi v2 This project implements the involvement API and the Pokeapi to

Leonardo Pareja Pareja 7 Jun 13, 2022
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat

prashanth s 1 Dec 24, 2021
Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.

Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll

Musab Hassan 33 Dec 28, 2022
Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop.

MultiDeviceHover Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop. Usage Install Using npm, install multi

Ryuta Sakai 1 Oct 5, 2021
A javascript library for multi-touch gestures :// You can touch this

hammer.js A JavaScript library for detecting touch gestures. Installation NPM npm install --save hammerjs or Yarn yarn add hammerjs or CDN https://cdn

Hammer.js 23.3k Jan 1, 2023
Super tiny size multi-touch gestures library for the web.    You can touch this →

Preview You can touch this → http://alloyteam.github.io/AlloyFinger/ Install You can install it via npm: npm install alloyfinger Usage var af = new Al

腾讯 AlloyTeam 3.3k Dec 12, 2022
Pressure is a JavaScript library for handling both Force Touch and 3D Touch on the web

Pressure is a JavaScript library for handling both Force Touch and 3D Touch on the web, bundled under one library with a simple API that makes working with them painless.

Stuart Yamartino 2.9k Dec 29, 2022
Some shape morphing hover effects on images using SVG clipPath.

Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js

Codrops 197 Oct 16, 2022
iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.

Intro iHover is a collection of hover effects using pure CSS, inspired by this codrops article, powered by Sass. Demo: https://gudh.github.io/ihover/d

null 3.5k Jan 4, 2023
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Ian Lunn 27.9k Jan 4, 2023
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list Examples available here: http://claude

Claudéric Demers 10.3k Jan 2, 2023
Touch-friendly image lightbox for mobile and desktop

Touch-friendly image lightbox for mobile and desktop

Andre Rinas 938 Jan 5, 2023
Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).

Please note: skrollr hasn't been under active development since about September 2014 (check out the contributions graphs on https://github.com/Prinzho

Alexander Prinzhorn 18.6k Jan 3, 2023
Parallax Engine that reacts to the orientation of a smart device

Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cu

Matthew Wagerfield 16k Jan 8, 2023
Stellar.js - Parallax scrolling made easy

Stellar.js PLEASE NOTE: This project is no longer maintained. If parallax scrolling is something you care about, please apply to become a contributor

Mark Dalgleish 4.6k Dec 10, 2022