Jump to content

Search the Community

Showing results for tags 'scroll'.

  • 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


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


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 there. I am trying to create a bottomsheet. As you guys can see, there is a scrollable div element inside draggable element. If scrollTop is 0 then the element should be dragged toward bottom side when users drag or touch down. If scrollTop is more than 0 then it should scroll and should not be dragged. But the problem is that I cannot solve this issue. I searched about this issue and i got the hint that I should use allowEvnetDefault option to fix this issue. And I tried to solve this issue but i can't. How can I fix this issue?
  2. Hi, How can I achieve a similar multi-step form like the following: https://forming-typeform.vercel.app/ I am challenged by the the positioning of each form section in the center after scroll os done. I find it challenging also to have the side nav buttons to handle the scroll direction accordingly. Any ideas on implementing this with gsap or pure JavaScript and CSS will be appreciated.
  3. Hi, as mentioned in title I want to show the elements one by one on screen on scroll while make line element grow vertically like a roadmap kinda view. And also I need to add active class to milestone-stone element so that it indicates the active element and give it a cool effect Thanks a lot in advance 🙏.
  4. Hello, seems that I cannot get ahead with the invalidateOnRefresh mode. I want my logo (red rectangle) start scaled and vertically centered and then scale down and move to the top into the header area on scroll. In my scrollTrigger timeline there are also other things that happen so I need to have that timeline. What I achieve is the choice between 2 things both not doing exactly what I want. invalidateOnRefresh: true does nothing. If I resize the window the centering via CSS is no longer respected (I understand that gsap overwrites and memorizes it for performance reasons). If I add the onRefresh part (commented out in the Codepen) the resizing works centering the rectangle correctly, but then starting the scroll makes the element position wrong again. I need both, though! Thank you in advance! Best regards, Stefan
  5. Hello fellow GSAP enthusiasts, I hope this post finds you all in good health and high spirits. I'm currently working on a project where I need to create a section animation using GSAP and Next.js. Despite my efforts, I haven't been able to find a suitable solution. I'm reaching out to this community in the hopes that someone can provide some guidance or point me in the right direction. To give you a clear idea of what I'm aiming to achieve, I would like to replicate the section animation showcased in this example: link to example. You can find the animation below the "About me" section on that webpage. Essentially, as the user scrolls, the image and content within the section slide vertically in a visually pleasing manner. While I initially attempted to create this animation using GSAP and Next.js, I have struggled to find the perfect implementation. I'm open to using alternative frameworks or libraries if they better suit this animation requirement. If anyone has successfully implemented a section animation like the one mentioned above, I would greatly appreciate any tips, code examples, or even a walkthrough of the steps involved. Thank you in advance for your time and assistance. I'm looking forward to your valuable input!
  6. I have a problem with three js and gsap animation, its logic is that as I scroll, the faces of the cube are attached to the cube itself. when you attach a face to the cube, the face becomes for a while with 100% transparency. The problem is that let's say in production when I update the page in the section below the section with the animation I described above, all of the faces of my cube become opaque as if they are simultaneously joined to the cube, what can this be about and how can it be fixed? now will send my code in the next message animation: useIsomorphicLayoutEffect(() => { if (!width) return; if (width >= 1200) { const changeOpacity = (props: ChangeOpacity) => { const { variant = "increase", selector, start = "+=75", end = `+=${window.innerHeight}`, } = props; if (variant === "increase") { return gsap.to( {}, { scrollTrigger: { trigger: contextRef.current, scrub: 0.1, start, end, onUpdate: (self) => { const progress = self.progress; gsap.to(selector, { opacity: progress * 2, duration: 0, }); }, }, } ); } return gsap.to( {}, { scrollTrigger: { trigger: contextRef.current, scrub: 0.1, start, end, onUpdate: () => { gsap.to(selector, { opacity: 0, duration: 0, }); }, }, } ); }; const ctx = gsap.context(() => { changeOpacity({ selector: ".first-panel", start: `+=75`, }); changeOpacity({ variant: "decrease", selector: ".first-panel", start: `+=${75 + window.innerHeight + 75}`, }); changeOpacity({ selector: ".second-panel", start: `+=${window.innerHeight}`, }); changeOpacity({ variant: "decrease", selector: ".second-panel", start: `+=${window.innerHeight * 2}`, }); changeOpacity({ selector: ".third-panel", start: `+=${window.innerHeight * 2 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".third-panel", start: `+=${window.innerHeight * 3}`, }); changeOpacity({ selector: ".fourth-panel", start: `+=${window.innerHeight * 3 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".fourth-panel", start: `+=${window.innerHeight * 4}`, }); changeOpacity({ selector: ".fifth-panel", start: `+=${window.innerHeight * 4 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".fifth-panel", start: `+=${window.innerHeight * 5}`, }); changeOpacity({ selector: ".sixth-panel", start: `+=${window.innerHeight * 5 + 75}`, }); }, contextRef); return () => ctx.revert(); } }, [width, contextRef]); codesandbox: https://codesandbox.io/p/sandbox/sharp-fast-j625lw problem: must be like this :
  7. Hi, for a school project I would like to recreate the effect as seen on this website : https://2018.craftedbygc.com/#enter The most important part is the fact to zoom in divs and go from one div to another in a smooth way, scrolling endlessly until the end, and have the animation evolve with scrolling, not just fire at a certain position. How can I achieve that ? I'm very new to gsap so I lack experience to determine the best approach.
  8. I want to implement an animation that would collect parts of the cube on a scroll. The farther you scroll, the more faces of the cube joined. I encountered a problem that the animation works only if markers: true. I read a thread on a similar case, it said that the parent has flex or that the height is not 100vh, but none of that worked for me. In the case where markers: false, the animation works until the first edge, and then the scroll works as normal, not as scrub. What are some other options to solve the problem? The link with the current problem: https://codesandbox.io/s/optimistic-poitras-cym566?file=/src/cube.tsx
  9. Hi Everyone. Greetings from Perú. I'm stuck with this functionality and I come here for your help. I will try to explain: I have a main section pinned with scrollTrigger and inner it I have a "slider" with multiple items and dot navigation. This slider should change its items while make scroll. Then when is mobile view the slider move his items horizontal and when is desktop the items movement is vertical. Also, the dot navigation should be updated with every item showed. ---- I try to use scrollTrigger in every item but I don't have good results as you can see in the codepen attached. I attached images for reference. I hope you can help me. Thanks for your attention. Have a nice day!!
  10. Hi all., Great day. When we're using the smooth scroll script the functionality is not working fine as we expected. As per your demo in codepen (https://codepen.io/GreenSock/pen/KKXZOyZ), we tried to include the height with a static value like (height: 9000px;) reference - https://prnt.sc/6K97ufrgm4CE . Shortvideos reference, https://recordit.co/hdjCQztnJM and https://recordit.co/3At0AA5qWD Unfortunately, we can't include the constant value here, the height will differ for each page. So, we tried to get the entire body height from the script. We haven't got any luck on this. Now, we are facing the height calculation methods only. So, anyone please help us to complete this without calculating the height? Thanks in advance
  11. Hi i have a code from pen but i dont know how to move to next section 3 without create more spacing below section 2 ??
  12. "Hello, friends. I have a project and they sent me a link. They want me to create an animation similar to the one in the provided link. In short, there are 4-5 nested images within a container. As you scroll, these images will gradually enlarge and fade away towards the right and left corners. Or is there a similar example available? I would like to demonstrate it with a video. The link is here: https://s2.dosya.tc/server24/4mctr6/WhatsApp_Video_2023-05-08_at_11.50.58.mp4.html"
  13. Hello, I want to merge squares when user scrolls down - red square must take blue squares position, width, height and rotation smoothly and then will disappear imperceptibly, blue will take green squares params and so on. How can i do it?
  14. 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?
  15. Hello, I wanted to make a horizontal scroll structure under four headings. And these four titles have their own content and the videos will be side by side and will be horizontal scrolling while scrolling. and when the content content is finished it will move to the next one. I made a script like this but when I get to the title the pin works correctly but the horizontal scroll does not move. can you help me?
  16. I made an animation of horizontal scrolling, it works fine on a computer, it works poorly on mobile phones, when scrolling, it scrolls in one direction to the end, after which it stops animating. let galleryScene = gsap.timeline(); let item = gsap.utils.toArray(".gallery__item"); const galleryTriger = new ScrollTrigger.create({ animation: galleryScene, trigger: ".photo-gallery", start: "top top", end: "+=" + 600, // markers: true, scrub: 1, snap: 1 / (item.length - 1), pin: true, ease: "none", }); function getMoveDistance(){ let move = document.querySelector('.gallery').scrollWidth; let block = document.querySelector('.gallery').offsetWidth ; move = (move - block) * -1; galleryScene.clear(); galleryScene.to(".gallery", 25, {x: move}) } getMoveDistance(); window.addEventListener('resize', getMoveDistance, true);
  17. I'm using scrollTrigger to animate some videos (.mp4) on scroll. Everything seemed to work fine, except that it doesn't seem to work on iOS (I tested on iPhone 11 iOS 16.0 and on iPhone 13 iOS 16.2). In fact, it is as if it didn't load the videos, the space remains empty and obviously the GSAP scrollTrigger animation doesn't start. Did I miss something?
  18. Hi everyone! I'm really enjoying gsap so far, its capabilities are truly spectacular! I'm trying to create an effect of a <div> rotated in the 3d space rotates back to the XY plane while simultaneously slides down to match the position of another <div>. The effect I aim to replicate can be found here, more precisely the image on the computer screen rotating and sliding down. I want to avoid having to use fixed values for the translation and thought about using Flip.fit() for moving the target element into place together with a scrollTrigger. Alas, it seems as if the 3D rotation is not being considered by the function, resulting in an awkward final state for the sliding element. Does anybody have any ideas on what's going wrong and how I could implement this?
  19. Firstly, ❤️ this! Secondly... wish I was better at it I'm using Locomotive scroll and Splitting.js which chunks up my text into spans, ready to animate. Great stuff. Locomotive scroll adds a is-inview class when a div is entering the viewport making it the perfect opportunity to start my GSAP animation so you get a word after a word effect as it enters the viewport. import { gsap } from "gsap"; import { PixiPlugin } from "gsap/PixiPlugin.js"; import { MotionPathPlugin } from "gsap/MotionPathPlugin.js"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); if (document.querySelector("[data-splitting]")){ gsap.from('.is-inview .char', { duration: .5, ease: "power2.out", opacity: 0, y: '50%' , delay: 20, stagger: .005 }) } On page load, Locomotive adds this is-inview class to everything above the fold so the animation above ^ works perfectly, However, GSAP has now run and finished so when I scroll down the page the letters don't animate in one after the other. They are just visible. You can see it's nested above .is-inview .char so whenever .is-inview is applied .char does it's thing - like it does initially on page load. I don't want to repeat (as in once you've scrolled past it, it shouldn't animate out and in again) so the repeat option for GSAP doesn't seem right - do you know how else can I achieve this? I almost need it to keep checking to see if .is-inview is applied and then if it is, run it again to everything that hasn't already run. I just can't get my head around that part 😕 Boooo! I saw a post on here that mentions scrollTrigger but this blows my CPU when I querySelectorAll(".char"). The page might have a lot of these spans. const sections = document.querySelectorAll(".char"); sections.forEach((section) => { gsap.to(section, { scrollTrigger: { trigger: section, markers: true, start: "top center" }, borderTopLeftRadius: 0, borderTopRightRadius: 0, duration: 1 }); }); A h2 on my site when all the JS has compiled for Locomotive & Splitting for example looks like this -if it's any help <h2 class="c-heading -h2 words chars splitting is-inview" data-splitting="" data-scroll="data-scroll" data-scroll-offset="500" style="--word-total:1; --char-total:9;"> <span class="word" data-word="eCommerce" style="--word-index:0;"> <span class="char" data-char="e" style="--char-index:0;">e</span> <span class="char" data-char="C" style="--char-index:1;">C</span> <span class="char" data-char="o" style="--char-index:2;">o</span> <span class="char" data-char="m" style="--char-index:3;">m</span> <span class="char" data-char="m" style="--char-index:4;">m</span> <span class="char" data-char="e" style="--char-index:5;">e</span> <span class="char" data-char="r" style="--char-index:6;">r</span> <span class="char" data-char="c" style="--char-index:7;">c</span> <span class="char" data-char="e" style="--char-index:8;">e</span> </span> </h2> Appreciate any guidance - Thanks!
  20. Hi guys. I am using locomotive scroll and gsap and scrolltiriger in my project. in codepen demo you can see the structure idea that I want to implement in my real project. (a smooth scrolling and a pin section with horizontal scrolling effect) I found out that the desire behavior happens only after an element with class pin-spacer is added to dom. in this demo on code pen after running the project everything work just fine but in my real project(that have this structure but with some photos and iframes and other things) the element with class pin-spacer is added with delay and it causes that the scroll behavior ( section with horizontal scrolling behavior ) not happening after page is loaded and it works after something like 20 seconds. I tried to used gsap and locomotive scroll packaes with npm or cdn or adding <script> directly and none of them solve my problem. could you help me please? how can I make the element pin-spacer added to dom right away? I want horizontal scrolling work when dom is ready
  21. I am trying to use the scrollTrigger plugin while implementing the fix for the safari scroll issue you flag in this article here. When I apply the CSS from this it breaks the pages native scroll and therefore the scrolltrigger doesn't fire. What can I do to resolve this In the section: Stop iOS Safari from resizing the window on scroll body, html { height: 100vh; width: 100vw; overscroll-behavior: none; overflow: hidden !important; } #viewport { position: fixed; overflow-x: hidden; overflow-y: scroll; height: 100vh; width: 100vw; -webkit-overscroll-behavior: none; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } https://greensock.com/docs/v3/HelperFunctions#scrollResize My simple scrollTrigger on the element is just this but it breaks cause the above CSS ScrollTrigger.create({ trigger: '#test', start: 'top top', // endTrigger: '#otherID', end: 'bottom 50%+=100px', onToggle: (self) => console.log('toggled, isActive:', self.isActive), onUpdate: (self) => { console.log( 'progress:', self.progress.toFixed(3), 'direction:', self.direction, 'velocity', self.getVelocity() ); } });
  22. Hello masters, I need help to create an animation like this: https://monosnap.com/file/d9JYlNbcmfA3Zbcn1vwOFoNjM9kCC6 I don't mean marquee text. I mean lines and text which appears on the scroll. Can someone help me to implement that? I will be happy to see any ideas and demos. Regards, Sergey
  23. Hi, I wanted to create a vertical/horizontal scroll but I've meet a problem where when using react 18, project just dont work. Could someone help me fix this issue so I can use react 18? https://codesandbox.io/s/test-forked-i9ng90?file=/src/App.js
  24. Hello, I added lightGallery framework to my gsap project, it works fine, but there is a scroll problem. When I turn off the lightbox, it shifts up and down. How can I prevent this? Can you help me? I guess scroll is not locking
  25. Hi! I was trying to achieve a similar effect to this codepen (found it in the gsap showcase) , but without all the complications of the loop. Most precisely, I was trying to achieve that instant snap effect, but without restarting when the array ends. Something exactly like this. I spent several hours yesterday without catching it, I would really apprec.iate any start point to work arround. Thanks in advance