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>
So basically I have got an unspecified transition set on my h4 - so basically a transition all - in CSS, which is interfering with GSAP's tween.
so I need to either get rid off it or specify what is supposed to be transitioned, so it does not add CSS transitions to properties you are going to tween on with GSAP on those elements.