Jump to content

Search the Community

Showing results for tags 'scrollsmoother'.

  • 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



  1. Hi! I'm trying to use Scrollsmoother but I have a problem with lazyload images. The scroll doesn't refresh or update when images are loaded. Maybe it could nice a method for refresh or update scrollsmoother. Anyone has a solution for this? Thanks!
  2. Just bumping this here in case it's useful for anyone else. Navigate to this url to see it working. https://cdpn.io/pen/debug/XWVvMGr#section3
  3. Highlights: Clamp your triggers! - Ever had ScrollTriggered animations at the very top of your page start out partially-scrubbed? Now you can clamp() them! This handy feature ensures that the start and end positions stay within the bounds of the page and ensures that all your "above the fold" elements start off in their native positions. Clamp data-speed - More clamping! This time for ScrollSmoother, you can now wrap your data-speed value in clamp() to make the associated element start out in its natural position if it's within the viewport at the top of the page. ScrollSmoother speed - Hold onto your hats (or scroll wheels?) We've added a speed option to ScrollSmoother which you can use to make the page scroll faster or slower. 🥳 Clamp Your Triggers It can be frustrating when your "above the fold" scrubbed animations start off part-way through. With clamp() you can ensure that they always start out in their native positions, no matter where your triggers are placed. ScrollTrigger.create({ trigger: elem, start: "clamp(top bottom)", // clamped value - will always fall between 0 and the max scroll end: "bottom top" // the parsed pixel value could be negative or more than the max scroll, }) So what's going on under the hood? All scroll triggered animations have trigger points that determine where the animation starts and ends. These values are nice and flexible, you can write them out as a number, as string shorthand or return one of those options from a function. start: "bottom 50%+=100px" // flexible string shorthand start: 200, // pixel value start: () => window.innerHeight / 2 // function that returns a number or string However you write it out, ScrollTrigger converts these values into a numeric scroll positions. If you set up your start marker above the fold, the start position will be negative and the animation will start off partway through. Sometimes this is desired behaviour but it can also be a bit awkward and unexpected. The new clamp feature allows us to prevent these trigger 'leaks'. We can tell ScrollTrigger to always keep the trigger value between 0 (the top of the page) and the maximum scroll position. Check out this demo and pop open the console to see the differing values. 👀 See the Pen Clamp your triggers! by GreenSock (@GreenSock) on CodePen. On load you can see that the un-clamped animation starts part-way through. If you scroll down to the bottom you'll notice that it also doesn't complete as the end marker is further down than the maximum possible scroll distance. If you want to know what's happening under the hood check out the docs on clamp. Wrapping the trigger in "clamp()" is just like telling ScrollTrigger to run the parsed trigger position through the following util - gsap.utils.clamp(0, maxScroll, triggerPosition) Clamp data-speed You can also use the new clamp feature over in ScrollSmoother-land. Now, when you apply data-speed to "above-the-fold" elements, they'll start exactly where you placed them in your design, unaffected by their speed value. No more unexpected offsets! Check it out... See the Pen ScrollSmoother Parallax Offsets with clamp by GreenSock (@GreenSock) on CodePen. Still a bit confused about when and why this is useful? We've got you - Cassie breaks it down in this new feature video New speed option for ScrollSmoother 🚀 ScrollSmoother.create({ smooth: 2, effects: true, speed: 1.5, // 1.5x the normal speed }); Now you have the power to control your scroll speed with a simple multiplier. Want things to move faster? Set it to 2 and watch your content zoom past twice as fast! Prefer a leisurely pace? Set it to 0.5 for a leisurely scroll at half the speed. See the Pen ScrollSmoother by GreenSock (@GreenSock) on CodePen. GSAP 3.12 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 Happy tweening! ✨
  4. Hello everyone, could you tell me how I can get rid of the skips when scrolling the page? I use deferred image loading and update the scroll trigger every time an image is loaded https://codepen.io/a-glinskiy/pen/ZEVGXxj
  5. Hello, vibrations occur in the borderline with the scrollsmoother plugin. To resolve this "will-change: transform;" I used it but the problem persists. Can you help me? #smooth-content { will-change: transform; } "* { will-change: transform; }" > As soon as I apply this the page is completely broken css Video https://streamable.com/1cc12y
  6. Hi. Please note: this is a general question asking if the plugins will work well in a positive way when using pinned scrollTrigger timelines. I have a large scrollTrigger timeline which is pinned and I want to do everything I can do to make it feel as smooth as possible. Can you use scrollSmoother on/for scrollTrigger timeline's which are pinned? timeline code is here if it helps: let tl = gsap.timeline({ onUpdate: render, defaults: { ease: 'none', }, scrollTrigger: { trigger: section, pin: true, // pin the trigger element while active start: 'top top', // when the top of the trigger hits the top of the viewport end: '+=1000%', // end after scrolling 500px beyond the start scrub: 0, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar: was 1 anticipatePin: 1, invalidateOnRefresh: true, }, })
  7. Hello, I'm pretty new with gsap. When I scrollsmoother is activated, it's like the "viewport" is being reduced when I scroll down. Behavior expected : https://codepen.io/amazingweb/pen/VwVdBBw The code only works in desktop for now (>991px)
  8. Hello, I'm trying to display a modal that scrolls horizontally when loaded. I took my inspiration from this pen : https://codepen.io/GreenSock/pen/wvxoGeG It works perfectly when ScrollSmoother is not involved, but as soon as I uncomment the lines (5 to 11) that enable ScrollSmoother, it doesn't work anymore and I don't have a clue about the reason why. It seems that my ScrollTrigger is now related to the ScrollSmoother instance and I don't want that. Is there a method to detach my ScrollTrigger instance from the ScrollSmoother one? Any guidance is much appreciated.
  9. Hi i'am a beginner new to GSAP, i'want to ask about the difference between package gsap and gsap-trial. so I'm now trying to create a portfolio website using NextJS-12 and want to add an animation on the scroll and try to use the ScrollSmoother library, when using gsap from npm I try to import "ScrollSmoother" from "gsap/dist/ScrollSmoother" but get an error that module not found, then I searched articles and some ScrollSmoother gsap projects for examples and found gsap-trial. when I try to import ScrollSmoother from the above path I don't get any error and the website works according to good results... but when I open the console in my browser I get a warning like the image below, can someone explain to me how to get the ScrollSmoother library it can be used on my website because as far as I know gsap-trial is running but if you see a warning from the image below it only runs locally and only certain domains... thank you
  10. Hi there! I think I've found a bug for a [possibly pretty rare] case with the following setup: page consists of pre-defined fixed height sections. each section has a ScrollTrigger (1) which just watches if a section becomes visible on the screen. each ScrollTrigger (1) may create an additional ScrollTrigger (2) which uses pinned container. for the case, it doesn't matter what else happens along with creating an instance of (2), but originally there's a complex setup of various stuff so it makes sense to mount/unmount extra content and logic according to triggering (1). all the page is wrapped into a ScrollSmoother. Actual result is that at the moment a dynamic ScrollTrigger (2) is created, smoothed scroll 'jumps' a bit towards scroll direction; the size of the jump depends on scroll speed. Also I've confirmed that it's not a performance lag. Removing whether a ScrollSmoother or a pin in (2) fixes the issue. Would love to hear some ideas/hints on how this can be fixed, although I'm also currently thinking about a workaround where I would pre-create pinned containers and try to setup nested ScrollTriggers based on them... Thank you!
  11. Hi, I'm having trouble getting GSAP ScrollSmoother to init properly on a simple single page barebones Next.js application. I have successfully imported the GSAP core and the ScrollSmoother into the index.tsx file as I've managed to log both in the console. This is what I have in my index.tsx file: import React, { useLayoutEffect, useRef } from 'react'; import { gsap } from "gsap" import { ScrollSmoother } from "gsap/dist/ScrollSmoother" import styles from '@/styles/home.module.scss' if (typeof window !== 'undefined') { gsap.registerPlugin(ScrollSmoother); } export default function Home() { const main = useRef(); const smoother = useRef(); useLayoutEffect(() => { const ctx = gsap.context(() => { smoother.current = ScrollSmoother.create({ smooth: 1, effects: true }); }, main); return () => ctx.revert(); }, []); return ( <> <main id="scroll-wrapper" ref={main}> <div className='scroll-content'> </div> </main> </> ) } I've attached a screenshot of the error message that is populating in the browser. I have spent significant time and multiple different methods of trying to get this to work properly and am having no luck so I'd thought I'd reach out to the experts in this forum. Any help would be greatly appreciated. Thanks, Dayne
  12. For those looking to integrate ScrollSmoother with Nuxt, here's a solution that builds off some of the work by @Born05 in this thread. CodeSandbox: https://codesandbox.io/s/gsap-scrollsmoother-nuxt-pbhmeh?file=/layouts/default.vue All you have to do is include the GSAPScrollSmoother and put whatever content you want inside of this. <GSAPScrollSmoother :vars="{ smooth: 2, effects: true }"> <Nuxt /> </GSAPScrollSmoother> You'll be able to access the ScrollSmoother in any page/component using this.$scrollSmoother, and can use any of the methods available, for example. this.$scrollSmoother.paused(true); let velocity = this.$scrollSmoother.getVelocity(); There are also a couple of extra methods available. $scrollSmoother.parseEffects() Call this to get ScrollTrigger to parse and create effects that are declared with data attributes, (data-speed and data-lag). $scrollSmoother.killEffects() Call this to kill all the ScrollSmoother effects. You will typically need to call this when navigating to a new page. $scrollSmoother.refresh() Refresh the ScrollSmoother and all ScrollTriggers. You should call this when navigating to a new page if you don't call .parseEffects() There are really only 2 files you need to be concerned about. The GSAPScrollSmoother.vue component file, and the nuxt.config.js file. The nuxt.config.js has some pageTransition callbacks in there that you may need to adjust to your project. And if you plan on using this in your own project, be sure to change all the gsap-trial imports to gsap, otherwise you won't be able to deploy it. Example usage on a page... export default { mounted() { // if you don't have any effects, use this.$scrollSmoother.refresh() instead this.$scrollSmoother.parseEffects(); this.myAnimation = gsap.timeline({ scrollTrigger: { ... } }) }, beforeDestroy() { // kill any ScrollTriggers you created this.myAnimation.scrollTrigger.kill(); // kill the effects that were created this.$scrollSmoother.killEffects(); } }
  13. Sukru

    Gsap Sticky Menu

    Hello, I have 3 or more content and at a certain point I can make a sticky menu, but how do I make these links slide to the linked id content and I need to add an active class to the active ul li a. And when it comes to sticky menu footer, I want to hide my sitcky menu, like fadeout, when I go up from the footer again, I want to bring the menu back. Can you assist?
  14. I'm working on a small proof of concent piece. As you can see in the HTML I have a series of simple divs stacked atop each other with a class '.flex-container'. The css basically sets each div's width and height to match the browser window and centers it's contents both vertically and horizontally. Each '.flex-container' div is also labeled with one of two other classes: '.text-holder' or '.box-holder'. The difference is one holds either a <div> (.box-holder) that is a simple box created via css and the other holds a <p> element (.text-holder) which will eventually hold text fed in via GSAP's TextPlugin. The issue is when I run the script locally or via code pen that the pinning is off after the fourth '.flex-container' div. That div and the following div become separate and you'll see some white background appear for a moment until the next div scrolling kicks in. However, the animation in the following div is off... all the following divs after those initial four do not scroll / animate as expected... that is until you resize the browser / adjust the size of the codepen panel. Once resized the scrolling and pinned animations work perfectly / as expected. I can't figure out what's not updating initially that updates when you resize the browser / panel (To adjust the size of the codepen panel either open the panel (Edit via Codepen) or click on one of the scaling buttons, ie 1x, .5x, .25x - you'll see the break between the 4th and 5th panels instantly fix itself). I'm running 2 simple forEach loops that assign the animations / ScrollTrigger variables to each 'text-holder' and 'box-holder' div... I don't seem to have any errors in the console. Thank you for having a look!
  15. Hey guys! First thanks for your amazing work I'm currently working on a project which is kind of a scrollytelling website, done with React+NextJS and I decided to go with GSAP for the animations. I'm not sure if I missed that in the docs, but I currently struggle with a problem that feels quite basic. I'm building different components to reuse and one of them is a "FadeInOut" wrapper-component, that should fade in its children when scrolling in view and fading out when leaving. The problem appears as soon as I want to add different data-speeds in addition (Tried it on triggered element itself and child). Seems like the start/end positions of the fade scrollTrigger are not taking in account the offset of data-speed...or somehow get calculated wrong. What am I missing? Thanks in advance!
  16. i wanna pin parent div and slide up div child. Everything was going well until a added ScrollSmoother and parent div end pin when last slide not moving up done. Can u guys support me? here its my code without ScrollSmoother https://codepen.io/manhnguyenn/pen/vYVqqPa and one more thing if u guys can help me edit the speed for every slide equal. Thanks a lot for your help
  17. Hello! I wanted to update our company's website to include ScrollSmoother on all of our pages, however, on a particular page I am noticing some heavy stuttering as I am scrolling down. I am possibly utilizing this plugin incorrectly, please let me know if so. Everything works fine until you reach the pricing section. I removed elements 1-by-1 to find the issue. I discovered the problem is the images and ONLY on Edge and Chrome (works on Firefox), but I can't figure out why, as it works perfectly fine on other sections/pages with images. You can check the homepage, which included just as many images (approximately) and even ScrollTrigger animations but there is no stuttering. Here's the demo page https://ds-dev.netlify.app/m300 I appreciate any help you guys can provide.
  18. I have applied id="smooth-wrapper" and id="smooth-content" by wrapping with div. But it is not working. I followed https://codesandbox.io/s/stupefied-minsky-pzceim?file=/src/App.js:733-752 but couldn't understand how to apply ScrollSmoother in these component based structure.
  19. I've got a bit of an odd issue, but I'm fully aware it's not a GSAP issue, so aren't looking for help with another library, hopefully just a push in the right direction? I've got a site setup using Scrollsmoother and SWUP for page transitions, and am killing SS and reinitializing it on each page transition. The odd issue I have is after visting other pages, the scroll speed seems to get quicker and quicker. Any idea what might be causing this? I had wondered if it was down to assets not loading in prior to SS init, but the height of a page is the same on a window refresh, as it is on a transition. Initially, I just captured this on video to help show the issue firsthand, as I'm hoping that might be enough to point me in the right direction. https://streamable.com/b5h22y For a direct comparison, the first page scroll on the video is normal, and the same page a few page transitions later at 00:43. (same mouse scrolling) Thanks in advance, and apologies for not having a minimal demo at this stage
  20. Hello, I added simplebar js to my ongoing project to customize the scrollbar, but there is a conflict. I think the styles come when gsap is disabled, but the simplebar styles do not work when gsap is active. Can you help me?
  21. Hello! I have searched extensively and for a very long time, but unfortunately have not found a similar problem or solution. Unfortunately I cannot present a "normal" minimal demo, but I have created two codepens to illustrate the problem. I apply smoothscrolling between two div's: wrapper and web. #wrapper, #web{ width: 100% !important; overflow: hidden; } This is the js-code ScrollSmoother.create({ wrapper: '#wrapper', content: '#web', smooth: 1.5, effects: true }); In HTML I sometimes use data-speed="0.7" If you would please access this pen https://codepen.io/design4u-koeln/pen/wvYrGxd full: https://codepen.io/design4u-koeln/full/wvYrGxd with a mobile device (android / chrome in my case) and scroll up and down a bit, the browser hangs! If I forbid smoothscrolling for mobile, this does not happen. https://codepen.io/design4u-koeln/pen/xxyXOaO full: https://codepen.io/design4u-koeln/full/wvYrGxd let mm = gsap.matchMedia(); mm.add("(min-width: 576px)", () => { ScrollSmoother.create({ wrapper: '#wrapper', content: '#web', smooth: 1.5, effects: true }); }) Maybe someone recognises the " known pattern", why this is happening? Thank you very much!
  22. Hello, Smoothscroller and Smooth Scrollbar version but I couldn't get the Smoothscroller feature to work. I think there is a point where they overlap. Can you help?
  23. code sandbox link (I was messing with this file and forgot to fork it, so I apologize, the file is now as it should be) In my little basic nextjs demo here (link above), I have set up an idea for a page I have where it would use a fixed position layout as you see here. I have three questions that are hopefully not too long: 1. Is this a good way to set up such a layout with gsap (using stacked, standard flow elements, in this case, the yellow and green lines in the middle of the page (which would be hidden in the actual site) to trigger the scrolling animation) or do you think there is a better way to achieve this? 2. If I scroll any amount of distance and hit refresh, the page doesn't reload from the beginning it just reloads and the scroll bar remains in place. What should I do to make it start back from scratch when I refresh the page? 3. I was trying out smooth-scroller, got it to work and it's very nice of course; however, If I have A setup like this in nextjs with these fixed elements which the smooth-scroller docs say to put outside the smooth content wrapper, I would have the main content in a wrapper (this wrapper would have smooth-scroller) then the fixed elements in their own parent div and then wrap all of that in say a react fragment or div because of course this is react and all components must only render one element. But when I do that smooth-scroller doesn't work anymore, So I'd love to see how smooth-scroller would get applied to this setup. Also, is there a way to make smooth-scroller work in code sandbox?
  24. Hello lovely people, I am quite new to GSAP so excuse me if the question is kinda silly. I have the following problem. I am using SvelteKit for my current assignment. I decided to add ScrollSmoother to the pages (because its freaking amazing). In order to avoid adding it to the layout of every possible route, I used it in the main layout component, so every page is affected by it. So far so good, everything works fine, but as expected in the pages that I have a fixed position of an element it is all messed up. I have went through the docs, and I know that fixed elements must be placed outside the smooth-wrapper, but with the current setup thats not possible. So here is the question. Is there a way to mimic the same effect of a fixed image as a background with something like a pin. Or do I have to find a way to call ScrollSmoother for every single route differently, even though this will cause unneeded redundency. Here is what I want to achieve, but with ScrollSmoother. desired-result.mp4 But as you might expect, this is what I get when ScrollSmoother is enabled. current-problem.mp4 I would greatly appreciate your advice! Thanks in advance.
  25. Hi, I'm trying to implement a custom cursor I made a while ago with scrollsmoother. I'm having trouble making the cursor appear between the background and the text. Everything works great if I remove the z-index in the cursor and scrollsmoother. Am I missing something? Thanks in advance.