Search the Community
Showing results for tags 'horizontal slider'.
Found 6 results
-
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.
