Zain12

Thanks for the response but unfortunately this is not working. I just observed that if I remove the pin property from the scrollTrigger object the animation stops but the browser back button works as it should i.e it scrolls me down perfectly fine.

Hi community. I know minimal demo is a core requirement for asking a question but I hope this would not require. In case, if it does, I will post the demo too. In my react app, when I click on the link and navigate to other route and after that if I click on the browser back button it does not scroll to the section where the link was placed (which is the default browser behavior) but as soon as I comment out my scroll trigger, it starts working fine. Here is my gsap settings useLayoutEffect(() => { const mediaQuery = window.matchMedia('(min-width: 768px)'); // if (mediaQuery.matches) { console.log('i am running') const sliderTopDiv = document.getElementsByClassName('sliderTopDiv') const slides = gsap.utils.toArray(".about"); const tl = gsap .timeline({ scrollTrigger: { trigger: sliderTopDiv, start: "50% 50%", end: "+=" + 100 * (slides.length - 1) + "5", pin: sliderTopDiv, scrub: 0.1, markers: false, }, }) .to(slides, { xPercent: -(100 * (slides.length - 1)), ease: "none", }); const images = gsap.utils.toArray(".aboutImg"); images.forEach((image, index) => { gsap.from(image, { opacity: 0.2, scale: 0.5, transformOrigin: "center center", ease: "none", scrollTrigger: { trigger: slides[index], containerAnimation: tl, start: "left 75%", end: "left 25%", //markers: { startColor: "fuchsia", endColor: "fuchsia" }, scrub: true, } }); }); tl.progress(1).progress(0) ; }, []); My slider animation is working perfectly fine, I have excluded the imports from the post

Thank you so much. Im following the approach suggested by you. Means alot

I have already tried this but cant figure out. Can you please have a look on my demo?

I have prepared a slider using gsap and react. My slider is working fine but I want the slides(Text and Image makes one slide) to be smoothly faded in when a user reaches them by scrolling. Your response would mean alot to me. Regards. Here is the minimal demo. https://stackblitz.com/edit/react-qwmzt1?file=src%2FApp.js,src%2Fstyle.css

Thank you so much. You saved me Best wishes

https://stackblitz.com/edit/react-jtmyey?file=src%2FApp.js,src%2Fstyle.css I have attached the minimal demo. I want the image to be fade out as it is scrolled

Hi respected community. I am making a slider where on vertical scrolling the images in the sliders are scrolled horizontally. My slider is working fine but i want to add a functionality that when a user scroll the image, it fades out and the next image appears and so on. Here is my code. I have excluded the component name and other stuff to keep the code precise. thanks useLayoutEffect(() => { const ctx = gsap.context((self) => { const sections = self.selector(".about"); const horizontalTween = gsap.to(sections, { xPercent: -99 * (sections.length - 1), ease:"fade", scrollTrigger: { trigger: wrapperRef.current, pin: true, markers: false, scrub: 1, end: "+=3000", }, }); // console.log(document.querySelector(".wrapper").offsetWidth) }, wrapperRef); return () => ctx.revert(); }, []); return ( <div className="sliderSection" ref={wrapperRef}> {images.map((img) =>( <div key={img} className="about" > <Image className="aboutImg" src={img} /> </div> ))} <video autoPlay loop muted playsInline className="sliderBgVideo"> <source src='/images/vids/backgroundVideoTwo.mp4' type="video/mp4" /> </video> </div> )

gsap.registerPlugin(ScrollTrigger); useLayoutEffect(() => { if(width>960){ const ctx = gsap.context((self) => { const sections = self.selector(".about"); console.log('this is section length'+sections.length) const horizontalTween = gsap.to(sections, { // xPercent: -70 * (sections.length - 1), xPercent: -99 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: wrapperRef.current, pin: true, markers: false, scrub: 1, // end: () => "+=" + document.querySelector(".wrapper").offsetWidth , // end: () => "+=" + document.querySelector(".wrapper").offsetWidth , }, }); console.log( document.querySelector(".wrapper").offsetWidth) }, wrapperRef); return () => ctx.revert(); } }, [width]); I have this code which works perfeclty fine in next js but when I implemented same thing in react, it gives following error. Any solution please. regards Uncaught TypeError: style is undefined _getState ScrollTrigger.js:660 init ScrollTrigger.js:1114 ScrollTrigger ScrollTrigger.js:857 create ScrollTrigger.js:2048 _scrollTrigger gsap-core.js:441 Tween gsap-core.js:3322 to gsap-core.js:3609 ctx SliderSection.js:29 f gsap-core.js:3927 add gsap-core.js:3936 Context gsap-core.js:3902 context gsap-core.js:4226 SliderSection SliderSection.js:26 React 9 workLoop scheduler.development.js:266 flushWork scheduler.development.js:239 performWorkUntilDeadline scheduler.development.js:533 js scheduler.development.js:571 js scheduler.development.js:633 factory react refresh:6 Webpack 20