首页 > 解决方案 > Gsap ScrollTrigger 动画水平

问题描述

我正在尝试进行水平滚动,而我的项目在移动时缩放到 0.5,但无法在 Foreach 中制作滚动触发器,这是我的代码的代码笔: https ://codepen.io/beatlesbob/pen /eYWMREW


sections.forEach((section,index) => {
    
    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: section,
            pin: true,   // pin the trigger element while active
            start: `top top-=${section.clientHeight*(index)}`, // when the top of the trigger hits the top of the viewport
            end: `+=${section.clientWidth+section.clientWidth*(index)}`, // end after scrolling 500px beyond the start
            scrub:true,
            toggleClass:'active',
            pinSpacing:false,
        }
      });

      tl.to(section, {xPercent: -100 * (sections.length-1)});
});```

Also I cannot put the active class on the current section

标签: javascriptanimationgsapscrolltrigger

解决方案


推荐阅读