I trying ton implement smooth scroll of locomotive-scroll to curtains in Reactjs. But he still doesn't work...
I get errors :
react_curtains__WEBPACK_IMPORTED_MODULE_2__.Curtains.disableDrawing is not a function
or
react_curtains__WEBPACK_IMPORTED_MODULE_2__.Curtains.updateScrollValues is not a function
App.js
import React, {useRef, useEffect, useState} from 'react';
import Home from './Pages/Home';
import {Curtains} from 'react-curtains'
import locomotiveScroll from 'locomotive-scroll';
function App() {
const [useNativeScroll, setUseNativeScroll] = useState(null)
const updateScroll = (xOffset, yOffset) => {
// update our scroll manager values
Curtains.updateScrollValues(xOffset, yOffset);
}
let container = useRef(null);
useEffect(() => {
const smoothScroll = new locomotiveScroll({
el: container,
smooth: true,
inertia: 0.5,
passive: true,
});
setUseNativeScroll(smoothScroll.isMobile)
console.log(Curtains);
if(!useNativeScroll) {
// we'll render only while lerping the scroll
console.log(Curtains.disableDrawing);
Curtains.disableDrawing();
smoothScroll.on('scroll', (obj) => {
updateScroll(obj.scroll.x, obj.scroll.y);
// render scene
Curtains.needRender();
});
}
}, []);
return (
<Curtains watchScroll={useNativeScroll} pixelRatio={Math.min(1.5, window.devicePixelRatio)}>
<div ref={el => container = el} className="App">
<Home />
</div>
</Curtains>
);
}
export default App;
I use this repo : https://github.com/martinlaxenaire/curtainsjs/blob/master/examples/multiple-planes-scroll-effect-custom-scroll/js/multiple.planes.parallax.setup.js
I have to fix this if I want the canvas to move with the rest of the page