Search the Community
Showing results for tags 'translatex'.
Found 3 results
-
scrolltrigger Issues with ScrollTrigger and xPercent on horizontal scroll
Archimede Soc.Coop. posted a topic in GSAP
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
-
Hi I have some odd behaviour when translating a div that is 100% of the viewport width and height when I translate it in an out of the viewport itself. The example is a simplified example of what's going to be a slide-in menu sitting off the viewport using translateX: -100% in my CSS. When I animate it in and out, it works OK using xPercent. But when I resize the window it doesn't work. I tried using vw units with the normal x: property but this created other problems. How do I get the behaviour that happens when the code first loads, to work after the window is resized? When I use scaleX on the element I don't encounter the issue (for obvious reasons I guess), but sadly I do need to translate the element in this instance because it will contain text. Any help would be fab var button = document.getElementById("button"); var menuClicked = false; var menuAnimation = new TimelineMax(); function menuIn() { if(menuClicked === false) { menuAnimation .to("#main-nav", .75, {xPercent: 100}); menuClicked = true; } else { menuAnimation .to("#main-nav", .75, {xPercent: -100}); menuClicked = false; } } button.addEventListener("click", menuIn, false)
-
I have a carousel that animates by xPercent when clicking menu buttons. I also use the Draggable with ThrowPlugin on the carousel to swipe left and right on sections of that carousel. The menu tween uses xPercent (which is what I want, since the carousel keeps its place on window resize) But the Draggable tween uses either translate3D or matrix by pixel values and not percentages. By the way, I'm use an array for snap: {x: [pos1, pos2, pos3]} I've been able to figure out the new percentage and remove the translate3d value using 'onThrowComplete', but the Draggable values is not cleared. So my questions are: 1. What is the best practice to integrate a regular tween and a Draggable tween on an element, when xPercent is required on the regular tween? 2. What is the correct way to flush out any values when a Draggable event has completed? Any help would be appreciated. Thanks in advance.
