qvstudio Posted October 26, 2021 Share Posted October 26, 2021 Hi there, I am using LocoMotive Scroll with GSAP Scrolltrigger and try to make Layered Pinning sections like the ScrollTrigger Demo from: But there seems to be a conflict with LocoMotive Scroll or not working, the blue sections are not overlapping when scrolled down My code: 'use strict'; import LocomotiveScroll from 'locomotive-scroll'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { Timeline } from 'gsap/gsap-core'; gsap.registerPlugin(ScrollTrigger); const locoScroll = new LocomotiveScroll({ el: document.querySelector('.container'), smooth: true, multiplier: 0.9, }); // 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', }); ScrollTrigger.create({ pin: '.phototitle', pinSpacing: false, start: 'top ', endTrigger: '.contentphoto3', markers: true, scroller: '.container', }); gsap.utils.toArray('.panel').forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: 'top top', pin: true, pinSpacing: false, }); }); ScrollTrigger.create({ snap: 1 / 4, // snap whole page to the closest section! }); // 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(); See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted October 26, 2021 Solution Share Posted October 26, 2021 Hey there @qvstudio - it looks, like you didn't set the scroller on the ScrollTriggers in the forEach-loop gsap.utils.toArray('.panel').forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: 'top top', pin: true, pinSpacing: false, scroller: '.container' // <--- missing in yours }); }) ...then it should work. Hope it'll help. See the Pen 0d0df847f67b9f2a6e7974235cf5e0e5 by akapowl (@akapowl) on CodePen On a different note: Because of how locomotive-scroll works, the snapping won't work with-locomotive-scroll - as mentioned in this thread here: 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now