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.86k stars 158 forks source link

GIF Animation #153

Closed CodeDoctorDE closed 2 years ago

CodeDoctorDE commented 2 years ago

Hello, I found your library and found it very useful. But I have one issue I'm facing with: How can I animate a gif while scrolling? Like here https://www.apple.com/macbook-pro-14-and-16/ where the mac is opened when you scroll

jscottsmith commented 2 years ago

You won't be able to create this effect with this library.

Effects like the one on Apple's website are not created with GIFs but with a large sequence of images (jpg/png) that are displayed based on scroll position.

Example of such effect with code. https://codepen.io/jacob_124/pen/dyydWbB

I'm not aware of any libraries that are able to create this effect but you can try and search for one or create it on your own.

CodeDoctorDE commented 2 years ago

Thanks for your tip. https://react-scroll-parallax.damnthat.tv/docs/examples/how-it-works#progress-is-relative-to-the-view maybe I can integrate your library to get the progress