Jump to content
Search Community

imamiddin

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by imamiddin

  1. I am usoing this in my project so 

    gsap.registerPlugin(ScrollTrigger);
      
    ScrollTrigger.saveStyles(".sticky-container");
      
      /*** Different ScrollTrigger setups for various screen sizes (media queries) ***/
    ScrollTrigger.matchMedia({

    "(min-width: 768px)": function() {
        
    let sections = gsap.utils.toArray(".box-container .hm-animation-sec");
    gsap.to(sections, {
      xPercent: -100 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
      trigger: ".sticky-container",
      pin: true,
    //   start: "top +=0px",
      start: "top 0%",
      markers: false,
      scrub: 2,
      snap: {
         snapTo: 1 / (sections.length - 1),
         duration: {min: 0.1, max: 0.3},
         delay: 0 
        },
        end: "+=2500",
      }
    });
     },
      
    // mobile
        "(max-width: 767px)": function() {
          let sections = gsap.utils.toArray(".box-container .hm-animation-sec");
        gsap.to(sections, {
          xPercent: -100 * (sections.length - 1),
          ease: "none",
          scrollTrigger: {
          trigger: ".sticky-container",
          pin: true,
             pinSpacing: true,
    //       start: "top +=0px",
          start: "top 0%",
          markers: false,
          scrub: 1,
          snap: {
             snapTo: 1 / (sections.length - 1),
             duration: {min: 0.2, max: 0.2},
             delay: 0 
            },

    //     end: () => "+=" + (document.querySelector(".container").offsetWidth / 5)
            end: "+=2500"
          }
        });    
       }, 
      
        // all 
        "all": function() {
        }
    });  
     

×
×
  • Create New...