scrollTrigger and locomotive a lof of animation

[Cyprian]

<template>
  <div class="scroll" data-scroll-container>
    <div class="horizontal-sections">
      <div class="pin-wrap">
        <div class="animation-wrap to-right">
          <div class="section">
            <NuxtLink to="/">
                <p> Chnage page</p>
                <h2>Scroll Down</h2>
            </NuxtLink>
          </div>
          <div class="section section-amin section-gray">
            <h2>You need to animate on scroll. Performing some action.</h2>
            <div class="block-anim"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="section section-lightblue">
      <h2>Some section 1</h2>
    </div>
    <div class="section">
      <h2>Some section 2</h2>
    </div>
    <div class="horizontal-sections">
      <div class="pin-wrap">
        <div class="animation-wrap to-right">
          <div class="section">
            <NuxtLink to="/">
                <p> Chnage page</p>
                <h2>Scroll Down</h2>
            </NuxtLink>
          </div>
          <div class="section">
            <h2>Some section 2</h2>
          </div>
          <div class="section section-amin section-gray">
            <h2>You need to animate on scroll. Performing some action.</h2>
            <div class="block-anim1"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <h2>Some section 2</h2>
    </div>
  </div>
</template>

<script setup lang="ts">
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import LocomotiveScroll from 'locomotive-scroll';
gsap.registerPlugin(ScrollTrigger);

let locoScroll: any = null;

onMounted(() => {
  locoScroll = new LocomotiveScroll({
    el: document.querySelector('.scroll') as HTMLElement,
    smooth: true,
  });
  pinType: document.querySelector(".scroll").style.transform ? "transform" : "fixed"
  locoScroll.on('scroll', ScrollTrigger.update);

  ScrollTrigger.scrollerProxy('.scroll', {
    scrollTop(value) {
      return arguments.length
        ? locoScroll?.scrollTo(value, { duration: 0, disableLerp: true })
        : locoScroll?.scroll.instance.scroll.y;
    },
  });

  const horizontalSections = gsap.utils.toArray('.horizontal-sections');

  horizontalSections.forEach((section: any, i) => {
    const thisPinWrap = section.querySelector('.pin-wrap');
    const thisAnimWrap = thisPinWrap.querySelector('.animation-wrap');

    const getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth);

    ScrollTrigger.create({
      trigger: section,
      scroller: '.scroll',
      start: 'top top',
      end: () => '+=' + thisAnimWrap.scrollWidth,
      pin: thisPinWrap,
      scrub: true,
    });

    const fakeHorizontalAnim = gsap.fromTo(
      thisAnimWrap,
      {
        x: () => (thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()),
      },
      {
        x: () => (thisAnimWrap.classList.contains('to-right') ? getToValue() : 0),
        ease: 'none',
        scrollTrigger: {
          trigger: section,
          start: 'top top',
          scroller: '.scroll',
          end: () => '+=' + (thisAnimWrap.scrollWidth - window.innerWidth),
          scrub: true,
        },
      }
    );

    const tl = gsap.timeline();
    tl.to('.block-anim', {
      duration: 1,
      scroller: '.scroll',
      ease: 'power3',
      clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)',
    });

    const tl1 = gsap.timeline();
    tl1.to('.block-anim1', {
      duration: 1,
      scroller: '.scroll',
      ease: 'power3',
      clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)',
    });

    ScrollTrigger.create({
      trigger: section,
      start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth),
      end: () => '+=' + window.innerWidth,
      animation: tl1,
      scroller: '.scroll',
      scrub: true,
    });

    ScrollTrigger.create({
      trigger: section,
      start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth),
      end: () => '+=' + window.innerWidth,
      animation: tl,
      scroller: '.scroll',
      scrub: true,
    });
  });

  ScrollTrigger.refresh();
});

onBeforeRouteLeave((to, from, next) => {
  ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
  locoScroll?.destroy();
  next();
});
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h2 {
  position: relative;
  z-index: 2;
  margin: 0;
}

.section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  flex: 0 0 100vw;
  background: lightgray;
}
.section-gray {
  background: gray;
}
.section-lightblue {
  background: lightblue;
}

.block-anim {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: lightgoldenrodyellow;
}

.horizontal-sections {
  position: relative;
  overflow-x: hidden;
  .pin-wrap,
  .animation-wrap {
    display: flex;
    position: relative;
    z-index: 1;
    height: 100vh;
  }
}

.spacer {
  height: 50vh;
  width: 100vw;
}
</style>

I use Nuxt3 and gsap and Locomotive Scroll. My first animation called tl  working correct, but when scroll down and view second animation called tl1 doen't working. How I can fix it ?

 

my webiste: https://skandynawia-przystan.vercel.app/

my github: https://github.com/cyprianwaclaw/Skandynawia-Przystan

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Cassie]

Additionally it would be incredibly useful if you could clarify what "not working" means.

What are you expecting to see and what is happening?
What steps have you taken to debug?

Thanks so much!