Jump to content

Search the Community

Showing results for tags 'scrollerproxy'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 8 results

  1. I have been taking almost a week to solve this problem by myself, my problem is that if I add snap in scroller trigger variables, there is a pin spacing increasing and moving on the top, but the snap effect is working, since I really want this effect of compulsory snap scroll. If I remove snap variable everything is fine. I dont know how to use CodePen to show my code since I am using reactJs and I am the beginner of gsap and locomotive scroll, I want to make the website have the smooth behavior moving( locomotive scroll ) and gsap horizontal scroll at the same time. I pushed my code onto Github, please whoever and take time to solve my confusion. The related file are App.js, App.scss, HorizontalScroll.jsx, useGsap.js, useLocoScroll.js , the rest of it please ignore: https://github.com/Derek-Y1106/Testing
  2. Hey there, first off: congrats on and even more, thanks for the scrollTrigger Plugin - it's just awesome. I have been using scrollMagic in a project of mine so far, and been re-writing it to use scrollTrigger instead. I love it, since in most cases it is way easier to use and wrap my head around what I need to achieve certain sorts of scroll based animations - great job on that! But I have run into an issue, that probably is rather an edge case, since it is concerning the use of scrollTrigger together with idiotwu' smooth-scrollbar plugin. I know you guys try keeping things in here related to problems related directly to GSAP, but I thought I'd post anyway, since my problem might have something to do with scrollTrigger's performance - not saying it does, though. It's more likely that I am doing something wrong here, I guess. So, I have sections that are being pinned and their contents transformed on the x-axis to make them appear horizontally scrolling. I found, that hooking scrollTrigger up to smooth-scrollbar works in just the same way as it works with scrollMagic; by adding a listener to smooth-scrollbar that refreshes scrollTrigger on the virtual scrolling of smooth-scrollbar. In my project, when I have only one section with that effect, everything runs buttery smooth, but as soon as there is more than one section with the trigger applied, the scrolling suffers drops in fps to below 50 - which makes it pretty much visibly laggy and sort of annoying. I made a pen with a total of 5 horizontal sections, to show, what I mean. https://codepen.io/akapowl/pen/7c21be9a241e0e13b98316c197b617ef This is not the case with scrollMagic - everything staying smooth there. https://codepen.io/akapowl/pen/074d0a380e2a0393b13d0fb57b5be166 So, now I am wondering: Since, if I understood correctly, scrollTrigger makes all the heavy requests on refresh, is it not a good idea, to hook the refresh to the virtual scroll? scrollMagic seems to handle it absolutely fine, so might this be something, scrollTrigger could be improved on? Or am I maybe doing something totally wrong here? Maybe somebody finds the time to look into this. Any input appreciated. Cheers Paul
  3. I'm creating a project where i need smooth scrolling as well as scroll-to function. In my codepen I've used smooth-scrollbar library coexisting with scrolltrigger's scrollerproxy() library... which works fine. But due to the scrolljaking the scrolltoplugin is not working properly. I've tried scrolltoplugin without smooth scrolling it works but I need both to work together. Is there any way to make them work together? Thanks in advance!
  4. Hello, Is it possible to apply ScrollTrigger.scrollerProxy() on body tag? I've tried to use this: https://codepen.io/GreenSock/pen/oNLqgBm with body tag as a selector for scroller, and it didn't work. Is there any example? Thanks!
  5. Hello..! I did setup locomotive scroll with GSAP for my Wordpress Site. Currently it is running beautifully..! But the problm is that, None of my Elementor Scroll Animations are working. I am pretty new to Wordpress and Web Development. If you can help me, it would be a great pleasure. (Iam using Astra theme + Elementor Pro. I created some scroll animations for couple of Elementor sections. Everything not working. And I add my page (#page) as the locomotive scroll element.)
  6. It appears as though the scrollerProxy is initiated multiple times after routing which causes the matrix 3d animation to jump from -232213 to 0 and back. I think this is because the nuxt instance is kept while routing between pages that also use the _.vue page template but I cant figure out how to force it to forget the past scrollerProxy 😢 Any advice as to how to initiate smoothscrolling in Nuxt? // _.vue template <template> <div> </div> </template> <script> import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export default { mounted() { this.smooth() this.$forceUpdate() }, destroyed() { // used to kill the ScrollTrigger instance for this component this.expand = false }, methods: { smooth() { if (process.client) { window.scrollTo(0,0) const locoScroll = new this.LocomotiveScroll({ el: document.querySelector('.smooth-scroll'), smooth: true }) // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on('scroll', ScrollTrigger.update) ScrollTrigger.scrollerProxy('.smooth-scroll', { 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('.smooth-scroll').style.transform ? 'transform' : 'fixed' }) // 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() const headerItems = ['.header__logo', '.nav', '.header__trigger'] if (!this.isTouchDevice()) { headerItems.forEach((item) => { gsap.to(item, { scrollTrigger: { trigger: '.header', scroller: '.smooth-scroll', scrub: true, pin: true, start: 'top', end: document.querySelector('body').offsetHeight, pinSpacing: false, }, y: document.querySelector('body').offsetHeight, transformOrigin: 'center top', ease: 'none' }) }) const largeMedia = document.querySelectorAll('.large-media.no-controls') if (largeMedia) { largeMedia.forEach((media) => { let mediaItem = media.querySelector('video') if (media.querySelector('img')) { mediaItem = media.querySelector('img') } gsap.to(mediaItem, { scrollTrigger: { trigger: media, scroller: '.smooth-scroll', scrub: true, start: 'top', end: 'bottom', }, y: '100%', transformOrigin: 'center top', ease: 'none' }) }) } const nextCase = document.querySelector('.next-case') if (nextCase) { gsap.to('.next-case .large-media', { scale: 1, opacity: 0, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) gsap.to('.next-case__background', { opacity: 1, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) gsap.to('.large-text-header', { opacity: 1, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) const observerTrigger = document.querySelector('.next-case__observer-trigger') const onIntersection = (entries) => { for (const entry of entries) { if (entry.isIntersecting) { this.loaded = entry.intersectionRatio if (entry.intersectionRatio > 0.95) { this.background = true if (!this.expand) { // window.location.href = nextCase.querySelector('a').getAttribute('href') // goor, doch effectief this.$router.push(nextCase.querySelector('a').getAttribute('href')) this.expand = true } } } } } let threshold = [] // create array with numbers between 0 and 1 for (var i = 0; i <= 100; i++) { threshold.push(i / 100) } const observer = new IntersectionObserver(onIntersection, { threshold }) observer.observe(observerTrigger) } } } }, isTouchDevice() { try { document.createEvent('TouchEvent') return true } catch (e) { return false } } }, } </script>
  7. Hello, I use a smooth-scrollbar within a project. I can run it with ScrollTrigger with scrollerProxy(). No problem. But it only works with scrub:true. I just can't use it to trigger it. I also used it with locomotive-scroll. The scrub problem is not there. (In codepen if you change scrub:true it will work) https://codepen.io/ozcancelik/pen/WNwJqRj Is this a scrollProxy bug? Or where am I doing wrong? Thank you. Ozcan
  8. GreenSock

    GSAP 3.4 Released

    GSAP 3.4 has arrived with some significant improvements to ScrollTrigger like: Accommodating different setups for various screen sizes, like a mobile version and desktop version - ScrollTrigger.matchMedia() Batching and staggering elements that enter the viewport, similar to what's often done with IntersectionObserver - ScrollTrigger.batch() Integrating with smooth scrolling libraries - ScrollTrigger.scrollerProxy() ScrollTrigger.matchMedia() You can use standard media queries to seamlessly transition between different ScrollTriggers. It's surprisingly simple to set up and let ScrollTrigger automatically handle all of the creating, undoing, and destroying for you. Basic setup ScrollTrigger.matchMedia({ // desktop "(min-width: 800px)": function() { // setup animations and ScrollTriggers for screens 800px wide or greater (desktop) here... // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore. }, // mobile "(max-width: 799px)": function() { // The ScrollTriggers created inside these functions are segregated and get // reverted/killed when the media query doesn't match anymore. }, // all "all": function() { // ScrollTriggers created here aren't associated with a particular media query, // so they persist. } }); See the Pen ScrollTrigger.matchMedia() Demo by GreenSock (@GreenSock) on CodePen. There's a new ScrollTrigger.saveStyles() method that can be useful with matchMedia(). It saves the current inline styles for any element(s) so that they're reverted properly if animations added other inline styles. It's explained in the video above. See the ScrollTrigger.matchMedia() docs for details. ScrollTrigger.batch() Normally, each ScrollTrigger fires its callbacks (onEnter, onLeave, etc.) immediately when they occur but what if you want to coordinate an animation (like with staggers) of ALL the elements that fired a similar callback around the same time? ScrollTrigger.batch() creates a coordinated group of ScrollTriggers (one for each target element) that batch their callbacks within a certain interval, delivering a neat Array so that you can easily do something like create a staggered animation of all the elements that enter the viewport around the same time. It's a great alternative to IntersectionObserver because it's more widely compatible and easier to work with. Plus you're not restricted to only entering or exiting the viewport - batch() can use ANY start and end values! Demo See the Pen ScrollTrigger.batch() Demo by GreenSock (@GreenSock) on CodePen. See the ScrollTrigger.batch() docs for details. ScrollTrigger.scrollerProxy() ScrollTrigger purposefully avoids "scrolljacking" (disabling the browser's native scrolling behavior in favor of a custom, non-standard scrolling solution). However, smooth scrolling was by far the most requested feature to pair with ScrollTrigger. There are plenty of smooth-scrolling libraries out there, so we created the .scrollerProxy() method to make it simple to integrate any of them with ScrollTrigger (or create your own effects). Here's a basic example using Locomotive Scroll but check out the .scrollerProxy() docs for examples with other libraries. See the Pen ScrollTrigger with LocomotiveScroll by GreenSock (@GreenSock) on CodePen. And more... GSAP 3.4 also delivers various bug fixes, so we'd highly recommend installing the latest version today. There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, Github, etc.). Resources Full release notes on Github Full documentation Getting started with GSAP Learning resources Community forums ScrollTrigger Express video course from Snorkl.tv Happy tweening!