search

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.9k stars 158 forks source link

All animations starts on top scroll #169

Closed lilybarberou closed 2 years ago

lilybarberou commented 2 years ago

Hi, I tried to animate elements on a horizontal website. I modified the scrollContainer so the animations work but they all start the same time (on scroll 0, onEnter event log for each animations). Means when we reach it in viewport animation is already ended.

Here is the code : https://codesandbox.io/s/charming-silence-kw55ge?file=/src/App.js

jscottsmith commented 2 years ago

There's some odd styling that is conflicting with the parallax setup. I've commented it out and also set scrollAxis="horizontal" in the provider and things seem to work.

https://codesandbox.io/s/practical-framework-2oi0eb?file=/src/index.scss