Atropos React Documentation

Browser Compatibility

Atropos is compatible with browsers which support the following features:

• Pointer Events
• CSS 3D Transforms
• CSS Transitions

Installation

We can install Atropos from NPM

npm i atropos

Styles

First we need to include Atropos stylesheet:

<link rel="stylesheet" href="path/to/atropos.css" />

With bundler (like webpack) you can import styles directly from JavaScript:

// main.js

import 'atropos/css'

If you use SCSS preprocessor you can import Atropos's styles from SCSS in the following way:

// main.scss

@import 'atropos/scss'

Atropos comes with stylesheets in different formats. The following files are available:

• atropos.css (exported as atropos/css) - all Atropos styles
• atropos.min.css (exported as atropos/css/min) - minified Atropos styles
• atropos.scss (exported as atropos/scss) - Atropos styles in SCSS syntax
• atropos.less (exported as atropos/less) - Atropos styles in LESS syntax

Component Usage

// import Atropos component
import Atropos from 'atropos/react';
  
export default function App () {
  return (
    <div id="app">
      {/* Atropos */}
      <Atropos className="my-atropos">
        {/* ... */}
      </Atropos>
    </div>
  )
}

In addition to Atropos's main CSS styles, we may need to add some custom styles, for example to set Atropos size:

.my-atropos {
  width: 320px;
  height: 160px;
}

Component Props

For example:

import Atropos from 'atropos/react';

export default function App () {
  return (
    <div id="app">
      <Atropos
        activeOffset={40}
        shadowScale={1.05}
        onEnter={() => console.log('Enter')}
        onLeave={() => console.log('Leave')}
        onRotate={(x, y) => console.log('Rotate', x, y)}
      >
        {/* ... */}
      </Atropos>
    </div>
  )
}

Control Elements Offsets

Atropos uses special data- attributes to control elements offset (parallax effect):

• data-atropos-offset - controls element offset/translate in percentage.

  For example:

  • data-atropos-offset="5" means that element will move 5% of its size on max rotate angles.
  • data-atropos-offset="-5" means that element will move -5% of its size on max rotate angles.

  Basically if you want the element to appear closer (be in front of the scene), then this value should be positive. And if you want the element to appear in the distance (be behind the scene), then this value should be negative.

• data-atropos-opacity - controls element opacity.
  For example:

  • data-atropos-opacity="0;1" - means element's opacity will change from 0 (on initial state) and up to 1 (on max rotate angles).
  • data-atropos-opacity="0.1;0.8" - means element's opacity will change from 0.1 (on initial state) and up to 0.8 (on max rotate angles).
  • data-atropos-opacity="1;0" - means element's opacity will change from 1 (on initial state) and down to to 0 (on max rotate angles).

For example:

<Atropos>
  {/* 
  Element with negative offset will move in reverse direction,
  making it appear behind the scene
  */}
  <img src="image-bg.png" data-atropos-offset="-5" />
  {/* 
  Element with no offset will not move
  */}
  <img src="image-middle.png" data-atropos-offset="0" />
  {/* 
  Element with positive offset will move in same direction,
  making it appear in front of the scene
  */}
  <img src="image-front.png" data-atropos-offset="5" />
</Atropos>

What's next?

As you see it is easy to integrate Atropos into your website or app. So here are your next steps:

• If you have questions about Atropos ask them in StackOverflow or use GitHub Discussions
• Create issue on GitHub if you found a bug.