Question 1

How do I use Parallax.js with React?

Accepted Answer

Wrap the Parallax instance in a React component using useEffect for initialization and useRef to attach the scene element. Ensure to call destroy() on cleanup to prevent memory leaks, as it's vanilla JS without built-in React support.

Question 2

Parallax.js or AOS for scroll animations?

Accepted Answer

Parallax.js is best for device orientation and cursor-based parallax with minimal setup, while AOS focuses on scroll-triggered animations with easier declarative syntax. Choose based on whether you need motion-responsive effects or scroll-linked fades.

Question 3

Why is parallax not working on my Android phone?

Accepted Answer

Gyroscope access requires a secure origin (HTTPS) on Android. Ensure your site uses HTTPS, or the library will fall back to mouse input, which may not work on touch devices without cursor movement.

Question 4

How to fix slow parallax animation?

Accepted Answer

Add CSS will-change: transform to layer elements, reduce the number of layers, and adjust friction or scalar values. The README warns about GPU overload and suggests these optimizations for performance.

Question 5

Can I make parallax layers clickable?

Accepted Answer

Yes, but it requires setting pointerEvents: true and managing CSS carefully. By default, pointer-events: none is applied for performance, so you need to override with position: absolute or specific pointer-events rules on interactable elements.

Question 6

How to handle gyroscope on iOS with Parallax.js?

Accepted Answer

iOS blocks gyroscope access by default. Use DeviceOrientationEvent.requestPermission() in a user-triggered event, like a button click, and initialize Parallax after permission is granted, as noted in the known issues section.

parallax

What is parallax?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions