Merkif

could you show your vision? Thank you

hello everyone, how to pin an accordion block and show its internal contents in full

Hi everybody! help with creating a horizontal scroll section similar to https://silviasguotti.design/ first 2 sections, and i want to pin one section to put another horizontal slider inside, effect similar to but horizontal direction, sorry for my eng, i need your help, thk https://codepen.io/akapowl/pen/zYqLyPQ/6a2480c123d88dc391faba0ea5cc590f

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 }, }); }, });

Hi, How can I scale the svg mask when scrolling?

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.

Привет, Раздел с новостями не липнет и не прокручивается до последней статьи, как это можно сделать с зеленым носком, а на мобильных устройствах горизонтальная прокрутка отключена. Спасибо.