Jump to content
GreenSock

qvstudio

Scrolltrigger GSAP + Layered Pinning Section conflict

Go to solution Solved by akapowl,

Recommended Posts

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

 

sreensav1.thumb.jpg.68d262b84eccf55d7a492b581e7af916.jpg

screensav.thumb.jpg.98d7d291c1e2ce1b6817c57af7deb515.jpg

 

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

  • Solution

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:

 

 

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×