ceribbo

Happy to share my solution: https://codepen.io/ceribbo/pen/ZEZmqvL By editing the one found on this post:

Hi there, I'm planning to realize an infinite gallery scrolling using the horizontal seamless helper, however I'm having some issues trying to scale and blur the active centered imaged. I need to realize something like the attached image. Do you have any suggestion on how to implement it? Thank you.

Hi there, I'm trying to obtain a simple behaviour on my mobile version of the website: The website will scroll naturally until I scroll down the horizontal section where the user shoud be able to scroll only 1 section at a time, I tried to use the normal horizontal scrolling functionality together with the snap configuration, however the snap is called only when the scroll ends so it will not result in fluid transition. The result should be as the image below. My only solution has been to use the pinned horizontal scrolltrigger together with an observer in order to scroll it section by section. Now the problem is that obviously the container is pinned for a fixed value, so if the user will scroll longer or shorter the end will be reached sooner or later, so I'd like to make something like a conditional end where it ends only when the last section has been reached. I should also be able to scroll back and this will be another challenge. Otherwise something to control the scroll power in order to set to a maximum of on section? My website is deployed on this link https://m1947.micelio.studio/about-us/ , the horizontal section is displayed when clicking on "Expand" (3rd vertical section). Here is my code at the moment: const observer = Observer.create({ type: "wheel,touch,pointer", wheelSpeed: -1, onDown: () => { if (!animatingHorizontal && currentIndex > 0) { animatingHorizontal = true; currentIndex--; gsap.to(".timeline-year-container", { x: -100 * currentIndex + "vw", duration: scrollDuration / 2, }) setTimeout(() => animatingHorizontal = false, 1000); } }, onUp: () => { if (!animatingHorizontal) { animatingHorizontal = true; currentIndex++; gsap.to(".timeline-year-container", { x: -100 * currentIndex + "vw", duration: scrollDuration / 2, }) setTimeout(() => animatingHorizontal = false, 1000); } }, tolerance: 10, preventDefault: true, onEnable: () => allowScroll = false, onDisable: (self) => allowScroll = true }); observer.disable(); scrollTween = gsap.to(".timeline-year-container", { // xPercent: "-700", ease: "none", scrollTrigger: { trigger: "#slide-section-about-3", pin: "#slide-section-about-3", pinSpacing: true, scrub: 0, top: "top 0%", end: () => `+=${$('.timeline-year-container').width()-window.innerWidth}`, snap: { snapTo: 1 / (sections.length - 1), delay: 0, duration: 0.3 }, onEnter: () => observer.enable(), onEnterBack: () => observer.enable(), onLeave: () => observer.disable(), onLeaveBack: () => observer.disable(), } });

Exactly! The problem is that when resizing, it's glitching, I'm trying to have a seamless transition using the progress

Ok, thank you so much, pretty much everything is clear now, however, if I wanna move the scrolling so that it appears at the beginning of the viewport? let's say the expandable container is distant 100vw from the beginning of the scrolltrigger, when expanding the secion, I want the section to position at the beginning of the viewport (so -100vw from left), I'm struggeling to insert this variable in the calculations keeoping the scrolling seamless

Thank you so much, sorry for the late answer but I think i figured it out, I am only having 1 more doubt: I tried to understand the calculations of the scroll in order to keep the view in the same place, however I'm still quite confused, can I ask you to explain this to me? change = window.innerWidth * (expanded ? 0.25 : -0.25), movement = containerInner.offsetWidth - window.innerWidth, progress = st.progress * 1 / ((movement + change) / movement); ... st.scroll(st.start + (st.end - st.start) * progress); For example, let's say that I'd like to scroll the new expanded at the beginning of the page (I've updated my codepen in order to have more blocks)

Hi there, I've created an horizontal scrolling on my website but I need to make a section dynamic and expandable, Here it is an example where I tried to replicate what I have in mind: https://codepen.io/ceribbo/pen/KKYwebJ In the example above the container's width is not updated correctly, even if I tried to update in the onComplete function. On my website I didn't declared the container width so the width is updated automatically, however when the width of the section is expanded, the scroll is not updated fluidly.

Very thanks, moreover I found that my code has a transition property from default css, I needed to overwrite it

Here it is my codepen solution: https://codepen.io/ceribbo/pen/mdoZwry

Hi, i want to animate a text when onMouseOver, the animation show move the text to the top and then, appear from the bottom, I have a simple video example here attached, any suggestion? I tried applying a .to(top) and then a .from(bottom) in a timeline but it is not working. Thank you Screen Recording 2024-02-23 at 18.41.43.mov