0

I am currently creating a page using Slick Slider and GSAP. However, in the responsive mobile size, the GSAP next to the slick slider fails to capture the area and becomes invisible on the screen. However, it appears on the screen again when resized. Is there a solution to this problem?

        //slick-slider
        $('.b_card_case').slick({
              dots: false,
              infinite: true,
              autoplay: true,
              speed: 300,
              slidesToShow: 4,
              slidesToScroll: 1,
              prevArrow: $('#arrow_prev2'),
              nextArrow: $('#arrow_next2'),
              responsive: [{
                          breakpoint: 1400,
                          settings: {
                                arrows: false,
                                dots: true,
                          }
                    },
                    {
                          breakpoint: 1024,
                          settings: {
                                arrows: false,
                                dots: true,
                                slidesToShow: 3,
                                slidesToScroll: 1,

                          }
                    },
                    {
                          breakpoint: 600,
                          settings: {
                                arrows: false,
                                dots: true,
                                slidesToShow: 2,
                                slidesToScroll: 2
                          }
                    }
              ]
        });



        //GSAP SCROLL TRIGER
        gsap.from(".sec_tit3", {
              scrollTrigger: {
                    trigger: ".sec_tit3",
                    scrub: 1,
                    start: "-100px 95%",
                    end: "top 65%",
                    toggleActions: "restart pause reverse pause",
              },
              opacity: 0,
              y: 100,
        });

        gsap.from(".noti", {
              scrollTrigger: {
                    trigger: ".noti",
                    scrub: 1,
                    start: "100px 85%",
                    end: "top 65%",
                    toggleActions: "restart pause reverse pause",
                    // markers: true,
              },
              opacity: 0,
              y: 200,
        });

I want to know the resolution time of these problems.

Gastón Schabas
  • 2,153
  • 1
  • 10
  • 17
YINO
  • 1
  • Please provide a codepen. I would also recommend asking gsap questions on gsap forums. https://greensock.com/forums/ – Amini Nov 17 '22 at 14:08

0 Answers0