How to use Locomotive & GSAP ScrollTrigger together?

Design help Custom code
1

Hey everyone,
I’m pretty new to webflow and coding, so this is my first-ever project of my own design. The thing that I want is to create some light interactions on scroll, change navcolor on the scroll and allow smooth scrolling.

I’ve created the animation for navbar color (using GSAP) change successfully, but once I add a locomotive scroll to the page before body tag everything stops working!

I have no idea about the possible solution, so would be happy to hear your thoughts

Here is my site Read-Only: https://preview.webflow.com/preview/jcfamilyoffice?utm_medium=preview_link&utm_source=designer&utm_content=jcfamilyoffice&preview=f1884b690730a2f3bf4806b2f6bb88c0&workflow=preview

2

Why would you need to use LS? GSAP has scrolltrigger.

3

LS for Smooth Scroll and to set values for different scroll-speed of elements
GSAP’s smoother scroll library is paid

4

I use GSAP in this project only for purposes of changing navbar color on scroll

5

For anyone interested:

With a lot of pain I figured our how to make these two work together.
Below you can see what I have in my before body tag in the project with an example of working GSAP animation (//Nav Olive)

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.1/dist/locomotive-scroll.min.js"></script>
  
<script>
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  scroller: '[data-scroll-container]',
  markers: false
});

var scroll = new LocomotiveScroll( {
    el: document.querySelector( '[data-scroll-container]' ),
    smooth: true,
    multiplier: 1.0,
    getDirection: true,
});

// Update scroll position
scroll.on( 'scroll', ( instance ) => {
    ScrollTrigger.update();
    document.documentElement.setAttribute( 'data-scrolling', instance.direction );
});

// Scroll position for ScrollTrigger
ScrollTrigger.scrollerProxy( '[data-scroll-container]', {
    scrollTop( value ) {
        return arguments.length ? scroll.scrollTo( value, 0, 0 ) : scroll.scroll.instance.scroll.y;
    },
    getBoundingClientRect() {
        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
    },
    pinType: document.querySelector( '[data-scroll-container]' ).style.transform ? "transform" : "fixed"
} );


ScrollTrigger.addEventListener( 'refresh', () => scroll.update() );
ScrollTrigger.refresh();

// Nav Olive
$(".section.is--about").each(function (index) {
  let triggerElement = $(this);
  let targetElement = $(".navbar");
  console.log(triggerElement);
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      start: "top top",
      end: "top top",
      scrub: 0.5
    }
  });
  tl.to(targetElement, {
    backgroundColor: "#737372",
    duration: 0.5
  });
});
1 Like
6

sorry for a silly question i have implemented a chasing mouse cursor that depends on the scroll data from the window how can i get the scroll from it please help me i am very struct in this`import {gsap } from ‘gsap’

const layer = document.getElementById(‘bottom-layer’)

let x = 0;
let y = 0;
let scroll= 0 ;

let height = Math.max(
document.documentElement.clientHeight,
document.body.clientHeight
)

window.addEventListener(‘mousemove’, (e)=>{

let scrollLeft =  document.documentElement.scrollLeft;
let scrollTop = document.documentElement.scrollTop;

x = Math.round((e.clientX + scrollLeft) / window.innerWidth * 100);  
y = Math.round((e.clientY + scrollTop) / height * 100);

// gsap.to(layer,{
//     '--x': `${x}%`,
//     '--y': `${y}%`,
//     duration:0.5,
//     ease: 'sine.out'
// })

moveLayer(x,y)

})

window.addEventListener(‘scroll’, (e)=>{
console.log(‘scroll’)
let scrollLeft = document.documentElement.scrollLeft;
let scrollTop = document.documentElement.scrollTop;

y += Math.round((scrollTop - scroll) / height * 100);
scroll = scrollTop;  

moveLayer(x,y)

})

const moveLayer = (x, y)=>{
gsap.to(layer,{
‘–x’: ${x}%,
‘–y’: ${y}%,
duration:0.5,
ease: ‘sine.out’
})
}

`

7

Hey @Daria_Kalinina ,
Hope you are doing great!
Sounds good that You have fixed your Problem. Could you help me about this I also need to do the same thing but When I’m using your code to do It’s not working I need to use both GSAP and Locomotive But What I’m facing issue Is I can’t update Window Scroll Because I need to use Gsap Animation for footer but Get issue in scroll which is paid version of GSAP So I need to use LS for smooth Scroll.
How Can I achieve this Functionality?