Jump to content
Search Community

Zain12

Members

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Posts posted by Zain12

    Browser back button not scrolling to the element from which I navigated to the section due to scroll trigger.

    in GSAP

    Posted

    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

    How to fade out when the image is scrolled in slider using gsap?

    in Banner Animation

    Posted

    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 and scroll trigger code working in next but not in react.js

    in GSAP

    Posted

    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

×
×
  • Create New...