Jump to content
Search Community

Archimede Soc.Coop.

Members
  • Posts

    4
  • Joined

  • Last visited

Everything posted by Archimede Soc.Coop.

  1. Hi, in the example i have cards with two trigger each card. First trigger scale the card and the second trigger pin the card. When I've added ScrollSmoother the start and the end of the scale trigger generates the issue and only the first scrolltrigger correctly works. Any help would be greatly appreciated. Thanks
  2. Hello @mvaneijgen, thank you for reply! Sorry for mistake, this is my fist approach to GSAP world. I follow your advise and i put in my code the "flex-basis" property. But i need that width it is 100% because, every "category slide" need content wich photo and text. The horizontal scroll must be tranlsate the first slide (slide with title "text with dynamic width for categories") -100% and the next 3 category slide must be stacked as you showed me. I have some sample from another site to show you, but i know this is not accepted in this forum.
  3. Hello! I edited my codepen for best visual. I expect there is no distance from the first slide (with auto width) to the second when they translate to negative X, therefore the "Category 1" title must to be near at the end of the first slide. My coidepen I hope I was clear
  4. 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
×
×
  • Create New...