JustHugo

Okay i understood where was my issue. I have a transform property on the Great Great Great Great parent div with id "page". Thank you for your precious help !

Oh thanks didn't know that could exist. So using "pinType:"transform"" make the deal. The only issue i have is that it's not smooth. i have to find how to make it smoother And btw how the my fixed position issue be relative to parent transform property while the parent is generated by gsap ( the div with .pin-spacer class)

Hi @Cassie, thank you for your answer, your code didn't change anything unfortunately. have you see my website to understand where and what is my problem ? my codepen is only here to show that i tried on it and everything works as i want. But i don't understand why on my wordpress website, fixed position don't works and is not relative to viewport.

Hi, i try to make a pinned element on my page. If you go to the section "Découvrez mon histoire" all down (or discover link in the menu) the section on the right should be pinned. but i don't understand why, the fixed position is relative to the page instead of the screen. I tried to do the same on codepen, and everything works well. Do you have any idea ? https://justhugo.fr/

Hi, i'm trying to replicate this animation , but i don't really understand what's wrong with the animation. https://codepen.io/pixit_design/pen/ExKWVdq -> found on another topic. My structure is different. When i don't set horizontal: true, the image property change, but when i want to do it with horizontal trigger, the property doesn't change anymore. I'm sorry if this question has already been asked. i hope you will be able to help me

hi, still no idea ? i'm stuck since 3 years i so frustrated and lost..

Hi, so i tried to make codesandbox. i guess this is exactly the same issue i have https://codesandbox.io/p/sandbox/tailwind-css-and-react-forked-ik710t?file=%2Fsrc%2Fservices%2Fhooks%2FuseLocoScroll.js&selection=[{"endColumn"%3A35%2C"endLineNumber"%3A28%2C"startColumn"%3A35%2C"startLineNumber"%3A28}] i will read what you sent to me

Hi, i'm trying to create an horizontal scroll on my gallery section. So i followed lot of tutorials, and compared my code to lot of codepen to understand why, my horizontal scroll doesn't works. Sometimes it works, but the section is not pinned, Sometimes the section is pinned but scroll doesn't works. What did i do wrong. Also i'm using tailwindCss. Here is my useLocoScroll Hook: import {gsap} from "gsap" import { ScrollTrigger } from "gsap/dist/ScrollTrigger" import LocomotiveScroll from "locomotive-scroll" import "locomotive-scroll/src/locomotive-scroll.scss" import { useEffect } from "react" gsap.registerPlugin(ScrollTrigger) const useLocoScroll = () => { useEffect(()=>{ const scrollEl = document.querySelector('#page-wrapper'); let locoScroll = new LocomotiveScroll({ el: scrollEl, smooth:true, multiplier:1, class: 'is-reveal', markers:true }) locoScroll.on('scroll', () => ScrollTrigger.update) ScrollTrigger.scrollerProxy(scrollEl, { scrollTop(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; } return null; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: scrollEl.style.transform ? "transform" : "fixed" }); const lsUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener("refresh", lsUpdate); ScrollTrigger.refresh(); return () => { if (locoScroll) { ScrollTrigger.removeEventListener("refresh", lsUpdate); locoScroll.destroy(); locoScroll = null; } }; }) } export default useLocoScroll And here my gallery component. import gsap from "gsap"; import { useEffect, useRef } from "react"; const Gallery = ({ data }) => { const ref = useRef(null); const projects = data.projects.data useEffect(() => { // This does not seem to work without a settimeout setTimeout(() => { let sections = gsap.utils.toArray(".gallery-item-wrapper"); const sectionWidth= ref.current.offsetWidth const scrollWidth = sectionWidth - window.innerWidth console.log(sections); console.log(ref.current.offsetWidth - window.innerWidth); gsap.to(sections, { scrollTrigger: { scroller: "#page-wrapper", scrub: true, trigger: ".sectionHorizontalScroll", pin: true, snap: 1 / (sections.length - 1), start: "top top", end: ()=> `+=${sectionWidth}`, markers: {startColor: "green", endColor: "red", fontSize: "12px"} }, x: -100 * (sections.length - 1), ease: "none", }); }); }, []); return( <section id="" className="h-screen w-max py-32 sectionHorizontalScroll" data-scroll-section > <div className="pinSectionHorizontalScroll"> <div className="flex flex-nowrap w-max" ref={ref} > { projects.map((project, index) => { return <GalleryItem mignature={project.attributes.mignature} title={project.attributes.title} key={project.attributes.title + "-" + index} /> }) } </div> </div> </section> ) } const GalleryItem = ({mignature, title}) => { return ( <div className="w-[50vh] gallery-item-wrapper" data-scroll> <h3 className="text-3xl font-bold text-grayPrimary">{title}</h3> </div> ) } export default Gallery At last, i added my locoScroll to my Layout like that: import ImageWebP from '../../components/ImageWebP' import Birds from './Canvas/Birds' import { Outlet } from "react-router-dom"; import Header from './Header'; import { useState } from 'react'; import CursorProvider from './CustomCursor'; import useLocoScroll from '../../services/useLocoScroll'; export default function Layout() { useLocoScroll(); const [isMenuOpen, toggleMenuOpen] = useState(false) return( <> <CursorProvider> <Header toggleMenu={toggleMenuOpen} isMenu={isMenuOpen}/> <section id='page' className={ 'h-full w-full relative transition-all' + (isMenuOpen ? " ml-96" : " ml-0") }> <section className='fixed left-0 top-0 w-screen h-screen -z-10'> <ImageWebP src={window.location.origin + "/assets/imgs/backrounds/background1.webp"} fallback={window.location.origin + "/assets/imgs/backrounds/background1.jpg"} classnames=" h-screen w-screen object-screen block " alt="A photo showing the expiration date on a box of Lucky Charms" className="object-cover h-full w-full" /> </section> <Birds /> <div id='page-wrapper' className=" w-full h-full min-h-screen z-30" data-scroll-container> <Outlet /> </div> </section> </CursorProvider> </> ) } Thank you if you take times to help me. There is the demo here: https://justhugo.fr