Lenis Scroll
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.15/dist/lenis.css" />
<script src="https://unpkg.com/lenis@1.3.15/dist/lenis.min.js"></script>
<script>
const lenis = new Lenis({ duration: 1.4 });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => {
lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);
</script>
Image Parallax
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".parallax-image-wrap").forEach((wrap) => {
const image = wrap.querySelector(".parallax-image");
gsap.fromTo(
image,
{
yPercent: -10
},
{
yPercent: 10,
ease: "none",
scrollTrigger: {
trigger: wrap,
start: "top bottom",
end: "bottom top",
scrub: true
}
}
);
});
});
</script>
