javascript – GSAP and scrollmagic how to reduce the space between one end and the next start

I did a codepen example of the scroll animation I’m doing on a website.

Everything is working as intended: when the first div of text and image goes to opacity 0, the next one comes to opacity 1 in the same place as the last one.

But what I need to fix is ‚Äč‚Äčthat it’s taking a bit more time for the next one to appear after the one before disappear, I can see that there’s a bunch of padding or space between the end of one and the start of the next one and I couldn’t fix it, if I change the duration the animation will go faster but there is still a blank between the animations. I don’t know if I need to target another thing or something like that, I hope I’m making myself clear Thank you!

Here is the link with my code: https://codepen.io/aszuster-dhnn/pen/MWQaYdm

HTML:

    <section class="scroll-fixed">
      <!-- ** FIRST SLIDE ** -->
      <div class="container container-scroll">
        <div class="etc">
          <div class="scroll-slide scroll-first-slide">
            <div class="scroll-middle-side-container">
              <img
                class="scroll-main-image"
                src="https://user-images.githubusercontent.com/89801607/166937475-9bb2dae8-90cc-4a24-8684-d44b32288052.png"
                alt=""
              />
            </div>

            <div class="scroll-left-side-container">
              <div class="scroll-subtitle">
                <span>Subtitle 1</span>
              </div>
              <div class="scroll-title">
                <h2>TITLE 1</h2>
              </div>
              <div class="scroll-text">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- ** SECOND SLIDE ** -->
        <div class="etc">
          <div class="scroll-slide scroll-second-slide">
            <div class="scroll-middle-side-container">
              <img
                class="scroll-main-image"
                src="https://user-images.githubusercontent.com/89801607/166937298-2af518cb-7634-48a3-9abd-caa8c0533a7d.png"
                alt=""
              />
            </div>

            <div class="scroll-left-side-container">
              <div class="scroll-subtitle">
                <span>Subtitle 2</span>
              </div>
              <div class="scroll-title">
                <h2>TITLE 2</h2>
              </div>
              <div class="scroll-text">
                <p>ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
              </div>
            </div>
          </div>
        </div>

        <!-- ** THIRD SLIDE ** -->
        <div class="etc">
          <div class="scroll-slide scroll-third-slide">
            <div class="scroll-middle-side-container">
              <img
                class="scroll-main-image"
                src="https://user-images.githubusercontent.com/89801607/166937603-a8a6f71e-37f9-4ae6-877d-7141040ae3d4.png"
                alt=""
              />
            </div>

            <div class="scroll-left-side-container">
              <div class="scroll-subtitle">
                <span>Subtitle 3</span>
              </div>
              <div class="scroll-title">
                <h2>TITLE 3</h2>
              </div>
              <div class="scroll-text">
                <p>
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                  ea commodo consequat.
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- ** FORTH SLIDE ** -->
        <div class="etc">
          <div class="scroll-slide scroll-forth-slide">
            <div class="scroll-middle-side-container">
              <img
                class="scroll-main-image"
                src="https://user-images.githubusercontent.com/89801607/166937755-eb7d261d-2075-4840-b32e-ffd17f546195.png"
                alt=""
              />
            </div>
            <div class="scroll-left-side-container">
              <div class="scroll-subtitle">
                <span>Subtitle 4</span>
              </div>
              <div class="scroll-title">
                <h2>TITLE 4</h2>
              </div>
              <div class="scroll-text">
                <p>Duis aute irure dolor in reprehenderit in voluptate</p>
              </div>
            </div>
          </div>
        </div>

        <!-- ** FIFTH SLIDE ** -->
        <div class="etc">
          <div class="scroll-slide scroll-fifth-slide">
            <div class="scroll-middle-side-container">
              <img
                class="scroll-main-image"
                src="https://user-images.githubusercontent.com/89801607/166937864-45e66c12-fa23-4075-99ce-584bddeca448.png"
                alt=""
              />
            </div>
            <div class="scroll-left-side-container">
              <div class="scroll-subtitle">
                <span>Subtitle 5</span>
              </div>
              <div class="scroll-title">
                <h2>TITLE 5</h2>
              </div>
              <div class="scroll-text">
                <p>
                  velit esse cillum dolore eu fugiat nulla pariatur.
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- ** SIXTH SLIDE ** -->
        <div class="etc">
          <div class="scroll-slide scroll-sixth-slide">
            <div class="scroll-middle-side-container">
              <img
                class="scroll-main-image"
                src="https://user-images.githubusercontent.com/89801607/166937939-0ba9d632-a5ba-4c6e-b9d4-89dbfe4f56de.png"
                alt=""
              />
            </div>
            <div class="scroll-left-side-container">
              <div class="scroll-subtitle">
                <span>Subtitle 6</span>
              </div>
              <div class="scroll-title">
                <h2>TITLE 6</h2>
              </div>
              <div class="scroll-text">
                <p>Excepteur sint occaecat cupidatat non proident</p>
              </div>
            </div>
          </div>
        </div>

        <div class="scroll-right-side-container">
          <div class="scroll-marker"></div>
        </div>
        <aside>
          <span class="counter">01</span>
          <span class="counter">02</span>
          <span class="counter">03</span>
          <span class="counter">04</span>
          <span class="counter">05</span>
          <span class="counter">06</span>
        </aside>
      </div>
    </section>

JS:

if (window.innerWidth > 992) {
  TweenLite.defaultEase = Linear.easeNone;
  var controller = new ScrollMagic.Controller();

  $(".etc").each(function (i) {
    var target = $(this).find(".scroll-slide");
    var tl = new TimelineMax();

    tl.from(target, 0.25, { opacity: 0 });
    tl.to(target, 0.25, { opacity: 0 }, 0.75);

    new ScrollMagic.Scene({
      triggerElement: this,
      triggerHook: 0,
      duration: "150%",
      offset: -200,
    })
      .setPin(this)
      .setTween(tl)
      .addIndicators()
      .addTo(controller);
  });
}

Leave a Comment