Jump to content
Search Community

Merkif

Members

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by Merkif

    scroll inner content in pinned section

    in GSAP

    Posted

    10 hours ago, GreenSock said:

    I'm not sure I'm visualizing it the way you intended, but that would likely require pinning each element for only the distance to have the lower tab animate to the bottom of the viewport, then unpin it and allow normal scrolling while also animating the lower tab(s) down at the same speed, and so on. It doesn't seem like a trivial thing to me. Doable? Very likely. Simple? Nope. Feel free to post in the "Jobs & Freelance" forum if you'd like to hire someone to help, or contact us directly if you need paid assistance from us. 

     

    Good luck!

    could you show your vision? Thank you

    reload or refresh scrollTrigger smooth scroll when resize window

    in GSAP

    Posted

    Hi how can I reload or update the scrollTrigger flattens the scroll height on resize, there is a large white space on the page in my horizontal scroll section without reloading, how can I fix this?
    if the window size is <1200px I use the browser's native scrolling.     

    gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.matchMedia({
	// desktop
	"(min-width: 1200px)": function() {
    smoothScroll("#content");
    function smoothScroll(content, viewport, smoothness) {
      content = gsap.utils.toArray(content)[0];
      smoothness = smoothness || 1;
    
      gsap.set(viewport || content.parentNode, {
        overflow: "hidden",
        position: "fixed",
        height: "100%",
        width: "100%",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
      });
      gsap.set(content, {
        overflow: "visible",
        width: "100%"
      });
    
      let getProp = gsap.getProperty(content),
        setProp = gsap.quickSetter(content, "y", "px"),
        setScroll = ScrollTrigger.getScrollFunc(window),
        removeScroll = () => content.style.overflow = "visible",
        killScrub = trigger => {
          let scrub = trigger.getTween ? trigger.getTween() : gsap.getTweensOf(trigger.animation)[0];
          scrub && scrub.kill();
          trigger.animation.progress(trigger.progress);
        },
        height, isProxyScrolling;
    
      function refreshHeight() {
        height = content.clientHeight;
        content.style.overflow = "visible"
        document.body.style.height = height + "px";
        return height - document.documentElement.clientHeight;
      }
    
      ScrollTrigger.addEventListener("refresh", () => {
        removeScroll();
        requestAnimationFrame(removeScroll);
      })
      ScrollTrigger.defaults({
        scroller: content
      });
      ScrollTrigger.prototype.update = p => p;
    
      ScrollTrigger.scrollerProxy(content, {
        scrollTop(value) {
          if (arguments.length) {
            isProxyScrolling = true;
            setProp(-value);
            setScroll(value);
            return;
          }
          return -getProp("y");
        },
        getBoundingClientRect() {
          return {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight
          };
        }
      });
    
      return ScrollTrigger.create({
        animation: gsap.fromTo(content, {
          y: 0
        }, {
          y: () => document.documentElement.clientHeight - height,
          ease: "none",
          onUpdate: ScrollTrigger.update
        }),
        scroller: window,
        invalidateOnRefresh: true,
        start: 0,
        end: refreshHeight,
        refreshPriority: -999,
        scrub: smoothness,
        onUpdate: self => {
          if (isProxyScrolling) {
            killScrub(self);
            isProxyScrolling = false;
          }
        },
        onRefresh: killScrub
      });
    }
    gsap.to(".advantage", {
      x: () =>
        -(document.querySelector('.advantage').scrollWidth - document.documentElement.clientWidth) +
        "px",
      ease: "none",
      scrollTrigger: {
        scrub: true,
        invalidateOnRefresh: true,
        invalidateOnResize: true,
        trigger: "#principles",
        pin: true,
        start: "top top",
        end: () => "+=" + document.querySelector('.advantage').offsetWidth
      },
    });
  
    gsap.to(".products--home", {
      x: () =>
        -(document.querySelector('.products--home').scrollWidth - document.documentElement.clientWidth) +
        "px",
      ease: "none",
      scrollTrigger: {
        scrub: true,
        invalidateOnRefresh: true,
        invalidateOnResize: true,
        trigger: "#products",
        pin: true,
        start: "top top",
        end: () => "+=" + document.querySelector('.products--home').offsetWidth
      },
    });
    gsap.to(".articles--home", {
      x: () =>
        -(document.querySelector('.articles--home').scrollWidth - document.documentElement.clientWidth) +
        "px",
      ease: "none",
      scrollTrigger: {
        scrub: true,
        invalidateOnRefresh: true,
        invalidateOnResize: true,
        trigger: "#article",
        pin: true,
        start: "top top",
        end: () => "+=" + document.querySelector('.articles--home').scrollWidth
      },
    });
  }, 
});

     

    sticky and horizontall scroll articles section, gsap?

    in GSAP

    Posted

    2 minutes ago, GreenSock said:

    Добро пожаловать на форумы, @Merkif. Это похоже на вопрос LocomotiveScroll - это не продукт GreenSock, поэтому мы не можем предложить для него поддержку. Мы действительно стараемся, чтобы эти форумы были сосредоточены на вопросах, связанных с GSAP (пожалуйста, прочтите правила форума ). У вас возник вопрос, связанный с GSAP? 

    Forgive me for my English, I use a translator, I want to say is it possible to achieve this effect through a green sock, I want to do it through a green sock, because the locomotive scroll garbage.

×
×
  • Create New...