Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

qvstudio

Members
  • Posts

    7
  • Joined

  • Last visited

qvstudio's Achievements

  1. 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
  2. I try to achieve something similar to this: https://codepen.io/akapowl/pen/153ca19006b303b070b25e9648faa60e
  3. hereby my demo: https://codepen.io/qwertmedia/pen/JjyLNPM
  4. 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! });
  5. 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();
  6. 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', });
  7. 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();
×