Locomotive Scroll + ScrollTrigger issue

[qvstudio 0 Likes (Newbie)]

Hi there, 

 

I've been trying to implement Locomtoive Scroll with GSAP ScrollTrigger. I've followed these instructions: 
https://www.snorkl.tv/scrolltrigger-smooth-scroll/ and the documentation on https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() but I get this Uncaught ReferenceError: locoScroll is not defined error is there something I've been seeing over the head?

Here's my code:

'use strict';

import LocomotiveScroll from 'locomotive-scroll';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

const scroll = new LocomotiveScroll({
  el: document.querySelector('.container'),
  smooth: true,
  multiplier: 1,
});

// 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('.container', {
  scrollTop(value) {
    return arguments.length
      ? locoScroll.scrollTo(value, 0, 0)
      : 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('.container').style.transform
    ? 'transform'
    : 'fixed',
});



gsap.to('.info-title', {
  x: 300,
  duration: 2,
  scrollTrigger: {
    trigger: '.info',
    markers: true,
    scrub: true,
    scroller: '.container',
  },
});

// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
ScrollTrigger.addEventListener('refresh', () => locoScroll.update());

// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();

[GreenSock 16,604 Likes (Superhero)]

It looks like you renamed your LocomotiveScroll instance "scroll" instead of "locoScroll"