offkoenig

Stackblitz starter templates erroring 404

My scrollTrigger items inside other scrollTrigger start their animation at the same time But i need them to start one-by-one and parent scroll to stop until each animation ends. I'm completely frustrated with this Here's my code: const horizontalSections = gsap.utils.toArray('section.horizontal') horizontalSections.forEach(function (sec, i) { var thisPinWrap = sec.querySelector('.pin-wrap'); var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); st.value = gsap.fromTo(thisAnimWrap, { x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue() }, { x: () => thisAnimWrap.classList.contains('to-right') ? getToValue() : 0, ease: "none", scrollTrigger: { trigger: sec, start: "top top", end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth), pin: thisPinWrap, invalidateOnRefresh: true, anticipatePin: 1, scrub: 1, } }); gsap.utils.toArray(`.portfolio`).forEach((section, index) => { const tl = gsap.timeline({ scrollTrigger: { trigger: section, start: "center center", end: () => "+=" + ((section.offsetWidth)), scrub: true, pinReparent: true, anticipatePin: 1, immediateRender: false, onUpdate: (self) => { if (self.progress < 1) { stopSt() } if (self.progress === 1 || self.progress === 0) { runSt() } } }, defaults: {ease: "none"} }); tl.fromTo(section.querySelector(".afterImage"), { xPercent: 100, x: 0}, {xPercent: 60}) .fromTo(section.querySelector(".afterImage img"), {xPercent: -100, x: 0}, {xPercent: -60}, 0); });