yashc

My bad sorry for that, I could not figure out how i can upload a image in sandbox why is it so complicated lol, but i created a short video demonstrating the issue so i wont take too much of your time The issue is that the space between slider and next component, ( ignore the last component ill make it responsive later lol) But the space being created when i try to make the screen smaller is my concern as idk how to fix it it goes away tho when i remove pin spacing, but then content (next component) just goes behind and past the slider This is my slider code import React, { useEffect, useState, useRef, useCallback } from "react"; import styled from "styled-components"; import cafe from "../../../assets/Images/bb201a3393c4dd27d8c758e2bf7c.jpg.webp"; import gsap from "gsap"; import { CustomEase } from "gsap/CustomEase"; import _debounce from "lodash/debounce"; import ScrollTrigger from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const Slider = () => { const [isAnimating, setIsAnimating] = useState(false); const Imagediv = useRef(); const Covera = useRef(); const Container = useRef(); CustomEase.create("Seperator", "M0,0 C0.05,0.19 0.33,0.87 1,1"); const Handleanimation = (event) => { if (!isAnimating) { setIsAnimating(true); const target = event.currentTarget; gsap.to(target, { scale: 0.95, duration: 0.1, ease: "Seperator", yoyo: true, repeat: 1, onComplete: () => { setIsAnimating(false); }, }); } }; const animation = useCallback(() => { const Section = gsap.utils.toArray(Imagediv.current.children); const t1 = gsap.timeline({}); t1.fromTo( [Imagediv.current, Imagediv.current.children], { x: 950, stagger: 0.1, duration: 2.5, }, { x: 650, stagger: 0.1, duration: 2 } ); gsap.to(Section, { xPercent: -150 * (Section.length - 1), ease: "none", duration: 6, scrollTrigger: { trigger: Imagediv.current, start: "top top", pin: Covera.current, scrub: 1.5, markers: true, end: `+=3000`, }, }); }, []); useEffect(() => { let ctx = gsap.context(() => { animation(); }, Covera.current); return () => ctx.revert(); }, []); return ( <Cover ref={Covera}> <div ref={Container}> <Imagecontainer ref={Imagediv}> <Imageelement onClick={Handleanimation}> <img src={cafe} alt="" /> </Imageelement> <Imageelement onClick={Handleanimation}> <img src={cafe} alt="" /> </Imageelement> <Imageelement onClick={Handleanimation}> <img src={cafe} alt="" /> </Imageelement> <Imageelement onClick={Handleanimation}> <img src={cafe} alt="" /> </Imageelement> </Imagecontainer> </div> </Cover> ); }; export default Slider; const Textabsolute = styled.div` position: absolute; top: 50%; transform: translate(-50%, -50%); color: white; font-size: 5rem; `; const Cover = styled.div` width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; `; const Imagecontainer = styled.div` height: 100vh; display: flex; gap: 7rem; background-color: #d1cbb8; `; const Imageelement = styled.div` margin-top: 5rem; width: 30rem; will-change: transform; img { width: 100%; object-fit: cover; } `;

I am using this slider as a way to slide through items, now the problem is not in desktop view, there it works well, the main issue is in mobile view which seems to be bugging out and leaving a huge pin space and when scroll down the pin space wont get small or something which makes the items to scroll but there being huge gap between next element i tried doing my research for a day but could not find the issue, chatgpt was also not able to help angry-tess-mzkscz - CodeSandbox THis is my codesandbox link, please open it in new window and then use mobile view with dev tools to replicate the issue

That helped thanks

import React,{useEffect,useState,useRef} from 'react' import styled from 'styled-components' import cafe from '../../Images/bb201a3393c4dd27d8c758e2bf7c.jpg.webp' import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const Slider = () => { const Imagediv = useRef() const Covera = useRef() const Container = useRef() useEffect(() => { console.log(Imagediv) const Section = gsap.utils.toArray(Imagediv.current.children) const t1 = gsap.timeline({ }) t1.fromTo([Imagediv.current,Imagediv.current.children],{ x: 500, opacity: 0, stagger: .1, duration:2.5 },{ x: 350, opacity: 1, stagger: .1, duration: 2 }) gsap.to(Section,{ xPercent: -100*(Section.length-1), ease: "none", duration: 6, scrollTrigger: { trigger: Imagediv.current, start: "top top", pin: true, scrub:true, markers:true, end: `+=3000` }, onUpdate: () => { console.log("Imagediv.current",Imagediv.current) console.log("Container.current",Container.current) } }) }, []) return ( <Cover ref={Covera}> <div ref={Container}> <Imagecontainer ref={Imagediv}> <Imageelement> <img src={cafe} alt="" /> </Imageelement> <Imageelement> <img src={cafe} alt="" /> </Imageelement> <Imageelement> <img src={cafe} alt="" /> </Imageelement> </Imagecontainer> </div> </Cover> ) } export default Slider const Cover = styled.div` width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; ` const Imagecontainer = styled.div` height: 100vh; display: flex; gap:1rem; ` const Imageelement = styled.div` width: 30rem; img{ width:100%; } ` So this is my react component but the element kind of just jumps or when it comes into start portion of the scroll trigger, it basically just disappears, when I tried consolelog it says it has a translate of y applied of 6k, I am not sure what I am doing wrong, been trying to debug for 4 hours watching countless videos idk maybe I m just dum, could someone explain what this trigger and scroll trigger is cause idk more videos I watch more confusing it becomes

Hey there yea i understand sorry for not providing a minimal code but sandbox doesn't seem to have the code i have work properly even though it works fine on my system, so i created a video explaining my problem. Did get the flip plugin to work properly thank you so much for that now i understand how the plugin works. Here since i cannot post YouTube link here as it says embedding issue or something there is a YouTube link in my code sandbox explaning the issue at hand. https://codesandbox.io/s/trusting-architecture-oi9f3i?file=/src/styles.css

Hey there thankyou for the reply i really appreciate the fact that you took time out of your busy day, i just had couple of questions i wanted to ask i want to learn gsap and this is kind of my learning project i seem to got the slider and everything scrolling my problem is only that when i click on the div itself it doesnt come to center maybe i can achive that with something like scroll to? my problem that when i scroll the x position changes but the div gets scrolled passed and the image opens but as the div is offset by scroll x the image doesnt get centered and always comes bit off, tried number of solutions, like scroll to but it seems like when i click on image the window wont scroll to the element that would also fix the issue could someone suggest any types of ideas or maybe solutions that you might know of?

https://codesandbox.io/s/cocky-waterfall-9ktq1c?file=/src/containerjs.js This is Code sandbox link for my project, i want it so that the images will be scrolled horizontally, but when i scroll and click on any image the image will open and center itself from the position ( just the kind of effect doesnt have to be) And the must center itself I tried for like 5 days but none of the things work for me, also gsap is amazing falling in love with it day by day, Would appreciate Any help as i am stuck on brick wall , Thank you Independent Designer & Art Director (camillemormal.com) Its kind of a effect the scroll from this website i wanna creater that and modify it for my website