qvstudio

Hi Thanks again, hereby a minimal demo: https://codepen.io/qwertmedia/pen/MWEPMeo

Here's the demo: https://codepen.io/qwertmedia/pen/MWEPMeo with the overflow-x visible I'am able to scroll horizontal, but when i try to 'grab' it's acting buggy

Hi @Cassie thanks for your reply and suggestion, tried to implement it, but for some reason the horizontal section, won't drag horizontal. When I grap the grey section the page moves up and down. Code also says: 'var drag is declared but its value is never read'

Hi there, I am trying to implement a draggable horizontal scrolling section with, but the rest of the page should remain vertical scroll. Can't figure out where it goes wrong. The yellow section is supposed to be horizontal with draggable option

Hi Jack, thanks for your reply. Must have shared the wrong link. The idea is following: in the photography section the images are overlapping each other. After the last images I want the page to scroll regular to the next work section https://codepen.io/qwertmedia/pen/JjyLNPM

I try to achieve something similar to this: https://codepen.io/akapowl/pen/153ca19006b303b070b25e9648faa60e

hereby my demo: https://codepen.io/qwertmedia/pen/JjyLNPM

Hi There, looking for some help once again. I made a layered pinned section (the photography section), where the images on the right are overlapping each other on scroll. After the last images I want to scroll the whole page again and then the next section (Work section, with blue blackground) pushing everything up. Now it's appearing on the previous section, see images attachted. How to solve this, tried it with setting an EndTrigger but didn't help... Here's my js code: // Photography Panels ScrollTrigger.create({ pin: '.phototitle', pinSpacing: false, start: 'top ', endTrigger: '.photo-end', markers: true, scroller: '.container', }); gsap.utils.toArray('.panel').forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: 'top top', pin: true, pinSpacing: false, scroller: '.container', }); }); ScrollTrigger.create({ snap: 1 / 4, // snap whole page to the closest section! });

Hi there, I am using LocoMotive Scroll with GSAP Scrolltrigger and try to make Layered Pinning sections like the ScrollTrigger Demo from: https://codepen.io/GreenSock/pen/KKpLdWW 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();

Hi I'm struggling with make the Photography part stick to top until the two sections below reach the end point. How can I set the end value of the ScrollTrigger to match the end of the sections below? ScrollTrigger.create({ pin: '.phototitle', pinSpacing: false, start: 'top top', markers: true, scroller: '.container', });

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();