toundai

I don't know why this is not working still. Any ideas ? No scroll, but the content is already on the hidden layer (right on the page). import React, {useLayoutEffect} from "react"; import { useEffect } from "react"; import { useRef } from "react"; import { imageData } from "../../../Constants/constants.jsx"; import "../../../../node_modules/locomotive-scroll/src/locomotive-scroll.scss"; import "../../../styles.scss" import {gsap} from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function useArrayRef() { const refs = useRef([]); refs.current = []; return [refs, (ref) => ref && refs.current.push(ref)]; } const Home = () => { const ref = useRef(null); const [sections, setSectionsRef] = useArrayRef(); useEffect(() => { if (ref) { if (typeof window === "undefined" || !window.document) { return } // const scroll = new LocomotiveScroll({ // el: ref.current, // smooth: true, // direction: "horizontal", // multiplier: 0.5, // }); const totalSections = sections.current.length; gsap.to(sections.current, { xPercent: -100 * (totalSections - 1), ease: "none", scrollTrigger: { trigger: ref.current, pin: true, scrub: 1, // snap: 1 / (totalSections - 1), end: () => "+=" + ref.current.offsetWidth } }); } }, []); const images = imageData.map((tupples, index) => tupples.map((url, elementIndex) => ( <GalleryItem src={url} index={elementIndex} columnOffset={index * 7} /> )) ); if (typeof window === "undefined" || !window.document) { return null } return ( <> {/*<div className="top"></div>*/} <div> <div className={"horizontalTest"} ref={ref}> <div className="contentTest"> <div className="galleryTest"> {images} </div> </div> </div> </div> </> ); }; export default Home;

I want to convert a locomotive scroll into a gsap module on react. import React, {useLayoutEffect} from "react"; import { useEffect } from "react"; import { useRef } from "react"; import { imageData } from "../../../Constants/constants.jsx"; import LocomotiveScroll from "locomotive-scroll"; import "../../../../node_modules/locomotive-scroll/src/locomotive-scroll.scss"; import "../../../styles.scss" import GalleryItem from "./GalleryItem.jsx"; const Home = () => { const ref = useRef(null); useEffect(() => { if (ref) { if (typeof window === "undefined" || !window.document) { return } const scroll = new LocomotiveScroll({ el: ref.current, smooth: true, direction: "horizontal", multiplier: 0.5, }); } }, []); const images = imageData.map((tupples, index) => tupples.map((url, elementIndex) => ( <GalleryItem key={url} src={url} index={elementIndex} columnOffset={index * 7} /> )) ); if (typeof window === "undefined" || !window.document) { return null } return ( <> {/*<div className="top"></div>*/} <div className="main-container"> <div className="scroll-container" data-scroll-container ref={ref}> <div className="content"> <div className="gallery"> {images} </div> </div> </div> </div> </> ); }; export default Home; I can't use locomotive scroll with both vertical and horizontal scroll. This component display multiple images placed on different position.