Search the Community
Showing results for tags 'horizontal slider'.
Found 7 results
-
Hi There, I have been using GSAP for a while and am comfortable with a lot of the basics but am trying to recreate the scrolling and click interaction effects seen on this page: https://halfof8.com/about You can see that each 'section' is vertically scrollable and then when user gets to bottom of that 'section' the whole section horizontally scrolls over and the next vertical scrollable 'section' starts. This is the biggest issue for me as you can see in the example I provided. I have the vertical scrolling working but you'll see the next 'section' in is not where it is in the example. The example sort of mimics a standard slider/carousel where the next item is queued up to go whereas with scrollTrigger I am stuck with the next section being adjacent to the bottom of the current vertically scrollable section. The other issue I am having is I cannot get scrollTo to scroll to the top of next section, it either scrolls to bottom of current vertical section or over to the correct next section but too far down. Any help would be appreciated, I'm trying to be as clear as possible. My skills may not be quite there or maybe this is something better left for an application outside of GSAP. Thanks for you time. -
Hello everyone! I have some problem to use correctly Scrolltrigger. The problem it show when i try to translate all slide to "xPercent: -100" when scroll. var thirdPanel = document.querySelector(".third-panel"); if (thirdPanel) { var thirdPanelRect = thirdPanel.getBoundingClientRect(); const sectionsThirdPanel = gsap.utils.toArray(".third-panel .slide"); if (sectionsThirdPanel.length > 0) { const numSections = sectionsThirdPanel.length - 1; const snapVal = 1 / numSections; gsap.to(sectionsThirdPanel, { xPercent: -100 * numSections, ease: "none", scrollTrigger: { trigger: ".third-panel .slide-second", pin: ".third-panel", scrub: true, snap: snapVal, start: `top+=${thirdPanelRect.top} top`, end: "+=" + document.querySelector(".third-panel").scrollWidth, markers: { startColor: "red", endColor: "red", fontSize: "3rem", indent: 200, }, }, }); } } For clarity please check my codepen. My intention is to create a "stacking" slide alfter first blue slide. I hope I was clear, open the codepen for best result. For other information please ask. Mattia
-
I have trouble with the margins of my slider container once I finish scrolling. I bet this is because of conflicts with another scrollTrigger, which should enlarge the backgrounds of similar sections on the scroll. Unfortunalety this is my first use of GSAP and I can't understand how to fix it. Just scroll my Pen and notice how Our Products text is jumping. You might need to open it in Codepen, looks like this problem is not reproducible in the widget. Thanks in advance!
-
Hi There! I am new in. using gsap but i like it. I am trying to make pages scroll page by page through scrolltrigger all is working perfectly but i want to speed up snap speed from one to another. I not mean this by scrolling speed the speed when we leave the scroll and then snap take the while to set. Is there any solution for this
-
Howdy Seniors, I've created an horizontal slider with vertical scroll as shown in this pen: https://codepen.io/GreenSock/pen/XWmEoNg?editors=0010 Issue: Snapping is not clean, and the middle slide (.des2) is moving slightly to the right. Please tell me what I am doing wrong in this code. Thanks, and a wonderful plugin and even greater support.
-
Hey everybody! I have a cool headstart on a timeline I created. I was looking into how I might go about turning this into a slider with controls that detect which slide they are on. Does anyone know of an example or starting point you can point me to? I did some reading in the forums, but it would appear that there's not a whole lot on this topic. Thank you!
-
Hi all superheros, I'm creating a horizontal slider where there's only 2 buttons to navigate left and right. Images are inside a div 'container' class. Question: How do I assign the width of each box to add up as the total width of the container to tween? Here's my Codepen: https://codepen.io/stanleyyeo/pen/RwwoOEz. Thank you very much for your help.
