当我使用机车滚动和滚动扳机时，获得一些粘性动画

发布于 2025-01-20 23:14:00 字数 3460 浏览 0 评论 0原文

这是我第一次在 gsap 中尝试滚动触发器，我试图了解机车滚动和滚动触发器如何协同工作，但是当动画进行时，我在动画中面临某种粘性，我的意思是动画在那里不平滑两者之间存在某种延迟，但我不知道其原因是什么。我尝试在我的代码笔中重现这种情况，我在下面链接了它。如果有人可以帮助我解决这个问题，那将会很有帮助这是我重新创建错误的代码笔代码。 code-pen

这是代码

gsap.registerPlugin(ScrollTrigger);

const pageContainer = document.querySelector(".scrollContainer");

const scroller = new LocomotiveScroll({
  el: pageContainer,
  smooth: true,
});
scroller.on("scroll", ScrollTrigger.update);

ScrollTrigger.scrollerProxy(pageContainer, {
  scrollTop(value) {
    return arguments.length
      ? scroller.scrollTo(value, 0, 0)
      : scroller.scroll.instance.scroll.y;
  },
  getBoundingClientRect() {
    return {
      top: 0,
      left: 0,
      width: window.innerWidth,
      height: window.innerHeight,
    };
  },

  pinType: document.querySelector(".scrollContainer").style.transform
    ? "transform"
    : "fixed",
});

//   ! edit here
gsap.to(".left", {
  scrollTrigger: {
    trigger: ".left",
    start: "center top",
    scroller: pageContainer,
    scrub: true,
  },
  duration: 1,
  x:50
});

ScrollTrigger.addEventListener("refresh", () => scroller.update());

ScrollTrigger.refresh();

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --white:#fff;
}
body{
    font-family: 'neue-med';
    background-color: #D4C9C9;
}
.container{
    padding: 35px;
    height: 200vh
}

h4{
    letter-spacing: 1px;
    display: inline-block;
    font-size: 25px;
    transition: .2s ease-in;
}
h4:hover{
    color: whitesmoke;
    cursor: pointer;
}

<!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" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css"
    />
    <!-- <link rel="stylesheet" href="/base.css"> -->
    <link rel="stylesheet" href="/style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container scrollContainer">
      <div class="sec" data-scroll-section>
        <div class="nav">
          <div class="nav-text">
            <h4 class="left">LOCOMOTIVE.CA</h4>
            <h4 class="right" style="float: right">V4.X-EDITION</h4>
          </div>
          </div>
        </div>
      </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
    
  </body>
</html>

原文

This is my first time trying scroll trigger in gsap I am trying to understand how locomotive scroll and scroll trigger work together but when the animation is going on I am facing some kind of sticky-ness in the animation I mean the animation is not smooth there is some kind of delay in between but I don't know what is the reason for this. I tried to recreate this situation in my code pen which I have linked below. It will be helpful if someone can help me to solve this Here is my code-pen code where I recreated the error. code-pen

here is the code

gsap.registerPlugin(ScrollTrigger);

const pageContainer = document.querySelector(".scrollContainer");

const scroller = new LocomotiveScroll({
  el: pageContainer,
  smooth: true,
});
scroller.on("scroll", ScrollTrigger.update);

ScrollTrigger.scrollerProxy(pageContainer, {
  scrollTop(value) {
    return arguments.length
      ? scroller.scrollTo(value, 0, 0)
      : scroller.scroll.instance.scroll.y;
  },
  getBoundingClientRect() {
    return {
      top: 0,
      left: 0,
      width: window.innerWidth,
      height: window.innerHeight,
    };
  },

  pinType: document.querySelector(".scrollContainer").style.transform
    ? "transform"
    : "fixed",
});

//   ! edit here
gsap.to(".left", {
  scrollTrigger: {
    trigger: ".left",
    start: "center top",
    scroller: pageContainer,
    scrub: true,
  },
  duration: 1,
  x:50
});

ScrollTrigger.addEventListener("refresh", () => scroller.update());

ScrollTrigger.refresh();

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --white:#fff;
}
body{
    font-family: 'neue-med';
    background-color: #D4C9C9;
}
.container{
    padding: 35px;
    height: 200vh
}

h4{
    letter-spacing: 1px;
    display: inline-block;
    font-size: 25px;
    transition: .2s ease-in;
}
h4:hover{
    color: whitesmoke;
    cursor: pointer;
}

<!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" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css"
    />
    <!-- <link rel="stylesheet" href="/base.css"> -->
    <link rel="stylesheet" href="/style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container scrollContainer">
      <div class="sec" data-scroll-section>
        <div class="nav">
          <div class="nav-text">
            <h4 class="left">LOCOMOTIVE.CA</h4>
            <h4 class="right" style="float: right">V4.X-EDITION</h4>
          </div>
          </div>
        </div>
      </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
    
  </body>
</html>

分享到QQ

分享到微博