Locomotive Scrolling Parallax Effect not working properly

Question

Issue: parallax effect is not working on the Parallax section. Notice that it flicks when the section shows up which is not what I want.

Currently data-scroll data-scroll-speed="-3" is on my experience section

What I did: For some reason, it works if I put data-scroll data-scroll-speed="-3" on my language section and it works how I want it for that section but it doesn't work for my experience section.

My code:

const intro = document.querySelector('.loading__container');
const word = document.querySelector('.word');
const content = document.querySelector('.content');

// On Load Animation
window.addEventListener('load', () => {
  word.classList.add('loading--active');
  gsap.set("html", {
    cursor: "wait"
  });
  setTimeout(() => {
    gsap.set("html", {
      cursor: "auto"
    }, "=-0.6");
    intro.classList.add('loading--inactive');
    word.classList.remove('loading--active');
  }, 1500)

  // Remove right after load
  setTimeout(() => {
    intro.remove();
  }, 2000)
});

// Scrolling Animation
const locoScroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: .50,
  smartphone: {
    smooth: true
  },
  tablet: {
    smooth: true
  },
});

// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
locoScroll.on("scroll", ScrollTrigger.update);

// tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy("[data-scroll-container]", {
  scrollTop(value) {
    return arguments.length ? locoScroll.scrollTo(value, {
      duration: 0,
      disableLerp: true
    }) : locoScroll.scroll.instance.scroll.y;
  }, // we don't have to define a scrollLeft because we're only scrolling vertically.
  getBoundingClientRect() {
    return {
      top: 0,
      left: 0,
      width: window.innerWidth,
      height: window.innerHeight
    };
  },
  // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
  pinType: document.querySelector("[data-scroll-container]").style.transform ? "transform" : "fixed"
});

// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.defaults({
  scroller: "[data-scroll-container]"
});


function initHomeAnimations() {
  //Page 2
  const tlH = gsap.timeline({
    scrollTrigger: {
      trigger: '.background',
      markers: {
        startColor: 'blue',
        endColor: 'blue'
      },
      scrub: true,
      start: '-40%',
      end: '40%',
    },
  });
  tlH.fromTo('.highlight', {
    color: 'rgba(255, 255, 255, 0.4)'
  }, {
    color: 'rgba(255, 255, 255, 1)',
    stagger: 1
  });

  const tlHRemove = gsap.timeline({
    scrollTrigger: {
      trigger: '.background',
      markers: {
        startColor: 'pink',
        endColor: 'pink'
      },
      scrub: true,
      start: '-20%',
      end: '60%',
    },
  });
  tlHRemove.to('.highlight', {
    color: 'rgba(255, 255, 255, 0.4)',
    stagger: 1
  });






  /**
   * Allow pinning animation only for Desktop/Ipad users
   */
  ScrollTrigger.matchMedia({
    "(min-width: 820px)": function() {
      const pinSecond = gsap.timeline({
        scrollTrigger: {
          trigger: '.background',
          pin: true,
          start: '0%',
          end: '100%',
        }
      });



    },
  });



}

function initNavAnimations() {
  // Nav
  const tlIntro = gsap.timeline({
    scrollTrigger: {
      trigger: '.intro',
      start: '40%',
      toggleActions: 'play none none reverse',
      pin: true,
      pinSpacing: false,
      markers: true
    },
  });
  tlIntro.fromTo('nav', {
    opacity: 1
  }, {
    opacity: 0,
    duration: .60
  });
}

function initMagneticButtons() {
  const magnets = document.querySelectorAll('.magnetic');

  // START : If screen is bigger as 540 px do magnetic
  if (window.innerWidth > 540) {

    // Reset the mouse if hover off otherwise play the animation
    magnets.forEach((magnet) => {
      magnet.addEventListener('mousemove', moveMagnet);
      magnet.addEventListener('mouseleave', function(event) {
        gsap.to(event.currentTarget, 1.5, {
          x: 0,
          y: 0,
          ease: Elastic.easeOut
        });
        gsap.to(".btn-text", 1.5, {
          x: 0,
          y: 0,
          ease: Elastic.easeOut
        });
      });
    });

    // Mouse move
    function moveMagnet(event) {
      var magnetButton = event.currentTarget;
      var bounding = magnetButton.getBoundingClientRect();

      const magnetsStrength = 80;
      const magnetStrengthText = 60;

      // console.log(magnetButton)

      gsap.to(magnetButton, {
        x: (((event.clientX - bounding.left) / magnetButton.offsetWidth) - 0.5) * magnetsStrength,
        y: (((event.clientY - bounding.top) / magnetButton.offsetHeight) - 0.5) * magnetsStrength,
        rotate: "0.001deg",
        ease: Power4.easeOut
      });
    }
  }
}

// Main Scripts
function initScripts() {
  initNavAnimations();
  initMagneticButtons();
}

barba.init({
  sync: true,
  timeout: 7000,
  transitions: [{
    name: 'default',
    once({
      current,
      next
    }) {
      // Once page loads
      initHomeAnimations();
      initScripts();
    }
  }]
})

:root {
  /* Colors */
  --clr-black: #1d1d1f;
  --clr-blue: #0071e3;
  --clr-transparent: rgba(255, 255, 255, 0.6);
  --clr-transparent-light: rgba(255, 255, 255, 0.4);
  --clr-transparent-full: rgba(255, 255, 255, 1);
  /* font-sizes */
  --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem);
  --fs-800: 6.25rem;
  --fs-700: clamp(1.94rem, 1.25rem + 3.45vw, 3.71rem);
  --fs-650: clamp(1.50rem, 1.25rem + 2vw, 3rem);
  /* 3 rem */
  --fs-600: clamp(2.62rem, 1.23rem + 1.96vw, 2.62rem);
  --fs-500: clamp(1.35rem, 1.15rem + 0.99vw, 1.86rem);
  --fs-400: clamp(1.13rem, 1.05rem + 0.37vw, 1.31rem);
  --fs-300: clamp(1rem, 0.94rem - 0.02vw, 1.125rem);
  --fs-200: clamp(0.66rem, 0.83rem - 0.24vw, 0.78rem);
  --fs-logo: 300;
  /* font-families */
  --ff-apple-normal: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  --section-padding: 0% 20%;
  --nav-height: min(4rem, 8vh + 095rem, 6rem);
  --section-padding: 5rem 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}


/**/

path,
i,
svg {
  pointer-events: none !important;
  /* Allows us to tap in the button without tapping in the actual img */
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

body {
  font-family: var(--ff-apple-normal);
  color: hsl(var(--clr-dark));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a:hover {
  opacity: 0.7;
}

a {
  transition: all 300ms ease;
}

.flex {
  display: flex;
}


/* ------------------------- Intro -------------------------------------------------- */

.loading__container {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 100;
  background-color: transparent;
  transition: all 400ms ease-in-out;
}

.loading__screen {
  position: relative;
  padding: 0;
  width: 100%;
  height: 100%;
  left: 0;
  /* will-change: top; */
  background-color: var(--clr-black);
}

.loading--active {
  opacity: 1 !important;
}

.loading--inactive {
  opacity: 0;
}

.loading__words h2 {
  position: absolute;
  opacity: 0;
  top: 50%;
  left: 50%;
  color: var(--clr-transparent-full);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  /* will-change: opacity; */
  transition: all 400ms ease-in-out;
}


/* ------------------------- Nav -------------------------------------------------- */

nav {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: var(--nav-padding, 0 20%);
  height: var(--nav-height);
  min-height: var(--nav-height);
  background: var(--clr-transparent);
  backdrop-filter: blur(10px);
  z-index: 10;
  border: 1px solid limegreen;
}

nav,
a {
  text-decoration: none;
  color: var(--clr-black);
  position: relative;
}

.nav__links :is(a, button) {
  margin-left: var(--nav-margin, 2rem);
  letter-spacing: normal;
}

.magnetic {
  /* margin: 1rem; */
  padding: 1rem;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #000;
}

.logo {
  font-weight: bold;
}

.email-button {
  cursor: pointer;
  padding: 0.5rem 1.5rem;
  font-size: 0.6rem;
  background-color: var(--clr-blue);
  color: white;
  border: none;
  border-radius: 1rem;
  font-weight: 400;
  opacity: 1;
  transition: all 250ms ease-in-out;
}

.email-button:hover {
  opacity: 0.9;
}

.section {
  min-height: 100vh;
  padding: var(--section-padding);
}


/* ------------------------- Intro -------------------------------------------------- */

.intro {
  min-height: 100vh;
  padding: var(--section-padding);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.emoji :is(img) {
  cursor: pointer;
  width: 30px;
  height: 35px;
  vertical-align: text-top;
  margin: 1rem 5px;
}

.headshot {
  position: absolute;
  top: 25%;
  left: 35%;
  height: 600px;
  width: 400px;
  border-radius: 5rem;
  padding: 2rem;
  clip-path: circle(200px at 50% 50%);
  translate: scale(2) !important;
  transform: translate(2) !important;
}

.intro__text {
  z-index: 2;
  text-align: center;
  padding-bottom: var(--first-page-text-padding, 20rem);
}


/* ------------------------- Background -------------------------------------------------- */

.background {
  position: relative;
  justify-content: center;
  padding: var(--background-padding, 2rem 2rem);
  background-color: var(--clr-black);
  min-height: 100vh;
}

.highlight {
  color: var(--clr-transparent-light);
}

.light {
  color: var(--clr-transparent-full);
}


/* ------------------------- Skills -------------------------------------------------- */

.language {
  position: relative;
  justify-content: center;
  object-fit: cover;
}

.language img {
  width: 100px;
  height: 100px;
}

.language__list {
  justify-content: center;
  flex-wrap: wrap;
  padding: 12rem 5rem;
}

.language__img--wrapper {
  padding: 3rem 1rem;
}

.language__name {
  position: absolute;
  bottom: 0;
  transform: scale(0);
  transition: all 300ms;
  font-size: 20px;
  opacity: 0;
}

.language__img {
  transition: all 250ms ease-in-out;
}

.language:hover .language__name {
  transform: scale(1);
  opacity: 1;
}

.language:hover .language__img {
  filter: brightness(80%);
  opacity: 0.86;
  transform: scale(0.9);
}

.section__title {
  text-align: center;
}


/* ------------------------- Experience -------------------------------------------------- */

.experience {
  position: relative;
  background-color: var(--clr-black);
  color: var(--clr-transparent-full);
  --section-padding: 0;
  object-fit: cover;
}

.experience img {
  position: absolute;
  width: 100%;
  height: 125vh;
  z-index: 1;
}

.experience__container {
  height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.experience__container h2 {
  position: relative;
  padding: var(--section-container-padding, 3.2rem);
  text-align: center;
  z-index: 5;
}


/* 
.single-image {
    height: 120%;
    top: 10%;
    object-fit: cover;
} */

.code {
  background-color: var(--clr-transparent-light) !important;
}


/* ------------------------- Responsive Media -------------------------------------------------- */

@media screen and (max-width: 540px) {
  nav {
    --nav-padding: 0 10%
  }
  .nav__links a {
    display: none;
  }
  .nav__links button {
    --nav-margin: 10rem;
  }
  .section__title {
    padding-bottom: 3rem;
  }
  .section__container h2 {
    --section-container-padding: 2rem;
  }
  .section__description p {
    --section-description-padding-left: 2rem;
  }
  .headshot {
    left: 0;
    top: 35%;
  }
}

@media screen and (max-width: 820px) {
  nav {
    --nav-padding: 0 10%
  }
}


/* ------------------------- Extras -------------------------------------------------- */

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}


/* @keyframes nav-in {
    0% {
        transform: translateY(-100%);
    } 
    100% {
        transform: translateY(0%);
    }
} */


/* ------------------------- Typography -------------------------------------------------- */

.fs-900 {
  font-size: var(--fs-900);
}

.fs-800 {
  font-size: var(--fs-800);
}

.fs-700 {
  font-size: var(--fs-700);
}

.fs-650 {
  font-size: var(--fs-650);
}

.fs-600 {
  font-size: var(--fs-600);
}

.fs-550 {
  font-size: var(--fs-550);
}

.fs-500 {
  font-size: var(--fs-500);
}

.fs-400 {
  font-size: var(--fs-400);
}

.fs-300 {
  font-size: var(--fs-300);
}

.fs-200 {
  font-size: var(--fs-200);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage | Hernandez G.</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css" />
</head>

<body data-barba="wrapper">
  <!-- Loading Container -->
  <div class="loading__container">
    <div class="loading__screen">
      <div class="loading__words">
        <h2 class="fs-800 word">Hello!</h2>
      </div>

    </div>
  </div>
  <!-- Nav -->
  <nav class="flex nav">
    <a href="./index.html" class="logo fs-400">Giovanny</a>
    <div class="nav__links">
      <a class="magnetic" href="#background"><span class="btn-text">Background</span></a>
      <a class="magnetic" href="#experience"><span class="btn-text">Experience</span></a>
      <a class="magnetic" href="#skills"><span class="btn-text">Skills</span></a>
      <button class="email-button">Email</button>
    </div>
  </nav>
  <div data-scroll-container data-barba="container" data-barba-namespace="first-page">

    <!-- Intro -->
    <section class="intro flex">
      <div class="intro__text">
        <h2 data-scroll data-scroll-speed="4" class="intro__name fs-700"><span class="name">Giovanny
                        Hernandez</span></h2>
        <h3 data-scroll data-scroll-speed="2" class="intro__subtitle fs-200">an aspiring Software Engineer with a creative and technical-minded focused on building efficient applications &amp; experiences.</h3>
      </div>
      <picture><img data-scroll data-scroll-speed="2" data-scroll-delay="0.035" class="headshot" src="./assets/headshot.jpeg" alt="">
      </picture>

    </section>
    <!-- Background -->
    <section id="background" class="section background flex">
      <div class="section__container fs-700">
        <span class="highlight">I'm currently a student at <a class="light" href="https://www.neiu.edu/"
                        target="_blank">Northeastern Illinois
                        University</a>. My expected graduation date is in 2025.</span>
        <span class="highlight">As a passionate person who loves CS, I enjoy learning about Software
                    Engineering.</span>
        <span class="highlight">I hope I can take part in the <span class="light">engineering</span> and
        <span class="light">designing</span> spectrum — a combination of technical knowledge with my creative vision to design and create beautiful implementations.</span>
      </div>
    </section>
    <!-- Skills -->
    <section id="skills" class="section skills">
      <div class="section__title">
        <h1>Skills</h1>
      </div>
      <div class="section__container">
        <div class="languages">
          <div class="language__list flex">
            <div class="language flex">
              <figure class="language__img--wrapper flex">
                <img src="./assets/html.png" class="language__img" alt="HTML logo" />
              </figure>
              <span class="language__name">HTML</span>
            </div>
            <div class="language flex">
              <figure class="language__img--wrapper">
                <img src="./assets/css.png" class=" language__img" alt="CSS logo">
              </figure>
              <span class="language__name">CSS</span>
            </div>
            <div class="language flex">
              <figure class="language__img--wrapper">
                <img src="./assets/js.png" class="language__img" alt="Javascript logo" />
              </figure>
              <span class="language__name">Javascript</span>
            </div>
            <div class="language flex">
              <figure class="language__img--wrapper">
                <img src="./assets/java.png" class="language__img" alt="Java logo" />
              </figure>
              <span class="language__name">Java</span>
            </div>
            <div class="language flex">
              <figure class="language__img--wrapper">
                <img src="./assets/csharp.svg
                                    " class="language__img" alt="C# logo" />
              </figure>
              <span class="language__name">C#</span>
            </div>
            <div class="language flex">
              <figure class="language__img--wrapper">
                <img src="./assets/xamarin.png" class="language__img" alt="Xamarin Forms logo" />
              </figure>
              <span class="language__name">Xamarin</span>
            </div>
            <div class="language flex">
              <figure class="language__img--wrapper">
                <img src="./assets/postgresql.png" class="language__img" alt="PostgreSQL logo" />
              </figure>
              <span class="language__name">PostgreSQL</span>
            </div>
            <div class="language flex">
              <figure class="language__img--wrapper">
                <img src="./assets/mysql.png" class="language__img" alt="PostgreSQL logo" />
              </figure>
              <span class="language__name">MySQL</span>
            </div>
            <div class="language flex">
              <figure class="language__img--wrapper">
                <img src="./assets/spring.png" class="language__img" alt="PostgreSQL logo" />
              </figure>
              <span class="language__name">Spring Boot</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Experience -->
    <section data-scroll data-scroll-speed="-3" class="section experience">
      <!-- <picture><img class="single-image" src="./assets/main.jpeg" alt="microsoft work image">
            </picture> -->
      <div class="experience__container flex">
        <h2 class="fs-700">Parallax</h2>
      </div>
    </section>
    <section class="code">
      <div class="experience__container flex">
        <h2 class="fs-700">Software Engineering</h2>
      </div>
    </section>
  </div>



  <script src="https://unpkg.com/@barba/core"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js" integrity="sha512-eP6ippJojIKXKO8EPLtsUMS+/sAGHGo1UN/38swqZa1ypfcD4I0V/ac5G3VzaHfDaklFmQLEs51lhkkVaqg60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js" integrity="sha512-CPA5LMoJI/a5HkSIAKcBtFXe4gqGjPUL2ExF/3PmhrrHI17wod9xOqqF+0WZQRKIIq0KwF8oG5BaiWobtrke3A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>

  <script src="./app.js"></script>
</body>

</html>