Search the Community

Hi There! I am new in. using gsap but i like it. I am trying to make pages scroll page by page through scrolltrigger all is working perfectly but i want to speed up snap speed from one to another. I not mean this by scrolling speed the speed when we leave the scroll and then snap take the while to set. Is there any solution for this

Hey there! I am new to gsap and have searched a lot though forums and have also tried to create a scrolling effect like one given below. Can someone please suggest me how can I get such a scrolling effect using ScrollTrigger. Thank You

my sample Hi,there! I'm currently working on my personal project with React. and I wanted to make horizontal scroll cards. I firstly referenced your's the 'Infinite Scrolling Cards' example below. I've just modified it a little bit so that I can apply it to React.(to see how it works) What I want is that my header doesn't move, and also my background doesn't move either, while the cards animation are working. But When I scroll it, they are moved to upper side.(I put on my sample to the top!! ) I tried making an another box which wraps the pin for ScrollTrigger , so that it only move inside of the box and other stuff(my header and background) doesn't move. (I can't use `position:fixed` for my header, as I did other works for other components, my header is connected to other components as well) Is there any way the horizontal scroll animation only works inside of any box, not in the 100% viewport size box(?) Also for some reason, the scroll position is not reversed when I scroll it to the end,(but when I scroll it to the start position, it's reversed to the end position) I'm still learning about coding, If someone can helps me I would really appriciate it?

hi, trying to achieve this type of horizontal scrolling like in reference by using scroll triggers and then as it continued. but its overlapping on other section . the reference site is - https://www.ics.ac.jp/jointexhibition2021/en/ please suggest me, WhatsApp Video 2021-10-10 at 11.16.00.mp4

Dear GreenSock community! I am currently working on a project with a horizontal parallax. Each "scene" needs to be in full width and height of the viewpoint with a static background and up to 3 "objects" within this "scene" that just slightly move horizontal with different speed on scrolling, so that it creates kind of a depth effect. I already built this by using rellax library and it worked pretty well, at least while using a modern mouse (Magic Mouse etc) without a physical wheel. My client is using a mouse with a wheel and this is causing the scrolling to be very faltering. I tried to combine my first attempt with several scroll smoothing libraries, nothing worked. So now I completely rebuilt this by using GSAP and ScrollTrigger. In general, the scroll smoothing works now with all kinds of mouses, which is great! BUT: I can only get the objects in the very first scene to move. In all other scenes, the objects do not move. I spent hours on this but can't get it run properly. I really hope to get some feedback on this issue from the community. Thank you in advance!

Hello! is there any possibility to create a button, after which our horizontal scroll will move to the section with a given id? Or just 100vw forward?

Hey hi, I am completely new to GSAP world, i am trying to learn many things from forum and gsap -demo, and trying from today. this trail is about horizontal scroll, have tried from demos, my plan is to achieve scroll some thing like this header | what-we-do -> work-sec -> about | contact section but after (what-we-do) section, background colors of all sections are disappearing!! have achieved horizontal scroll but its not in a proper way, Please check my code and let me know where did i missed things??

I created this simple horizontal scroll, and I want to set start and end point to each section so I can individually target them for animation. Right now I'm facing issue to set Start: and End: point to SectionC (or any section), I can target a section for animation but start and end point not matching targeted section width.

Hey guys, I am trying to tell a story which can be achieved through simple slides and carousels, but I want to add some life to it. I came across a page that does exactly what I am trying to do - https://www.prevint.pt/. Fell in love with this implementation. From the source I can see that it has a wide <ul> with 100vw <li> sections and on scroll the <ul> is translated left ( amount = width of section ). Seemed life a fairly straightforward situation and I am sure that this page is using GSAP. But I am unable to figure out few things: Should I use any third party scroll library along with GSAP to do horizontal scroll ( as in the reference site there are no scroll bars ). Animate the<ul> to translate left on first mouse-wheel event and ignore subsequent mouse-wheel events until animation/transition is complete. Controlling/Scrubbing the slides with the custom navigation at the bottom( but that's secondary concern here). I have tried different approaches but none of them could do this. The attached codepen is the basic one with snapping sections but they don't snap immediately ?. Can someone please point me in the right direction. UPDATE: Attached codepen with the solution.

Hi, I have an horizontal rtl page, the indicators are all aligned to the left. the start and end are sticked together... have any one managed to work with the rtl horizontal scroll? thanks

dear greensock, I am making this post in the hopes that someone can help me with this issue. seems absurd that i am making a post since I have been seeing this effect everywhere, but I cant' seem to make it work on my code. Im tried to reproduce the error inside a codepen I hope that helps So basically there are two things that i am missing: One: once the horizontal scroll is over, I want it to continue to vertically scroll through the rest ( the third panel, which is exactly like the first panel). What happens now is that even though the horizontal wrapper is pinned, it continues to scroll through the third panel and it kind of disappears Two: The horizontal scrolling doesn't seem to be working on a mobile device. Here is a link of a very good example of what I am trying to achieve: https://garoaskincare.com/ It is my first go at gsap so bare with me

Hi! Not sure if this is the best place to ask help regarding this, but this forum was very helpful to get me started with gsap and scrollmagic. I'm currently working on a horizontal scrolling website with ScrollMagic and GSAP. I've stumbled upon several examples and it's working well on desktops with mousewheel function. However, when it comes to tablets where mousewheel is not applicable, the anchor navigations don't work and the results when using Chrome and Safari varies (anchor links not working on ipad chrome but works well on ipad safari). I added a drag function which is helpful for tablets, but it staggers and the animation is not very smooth. Below is the mousewheel function I used: document.addEventListener('wheel', function(e){ if(e.type != 'wheel'){ return; } let delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 1) || 1; document.documentElement.scrollLeft += delta; document.body.scrollLeft += delta; }); And here is the drag function where I based from https://codepen.io/thenutz/pen/VwYeYEE const slider = document.querySelector('html'); let isDown = false; let startX; let scrollLeft; slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; }); slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mousemove', (e) => { if(!isDown) return; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX) * 3; slider.scrollLeft = scrollLeft - walk; //console.log(walk); }); Unfortunately, with recent ipad update, it seems not possible to detect if the user is using an ipad or ipad pro. Is there something wrong with the code or possibly css that can fix this? Appreciate any help!

Hello to everyone overseas. It's 2:00 in the middle of tonight in Japan. Thanks to remote work, I can work until this time. I would like to animate with ScrollTrigger, but apparently it is difficult with the demo I made. I wondered how I could do it, and what I ended up with was ScrollTrigger.proxy, but I read the documentation and didn't understand it. Well, the reason is that I can only read English through DeepL. .... If there are any kind-hearted Gsapers out there, please let me know how to get the ScrollTrigger working in the demo. If you can help me, I will pray for your health from a faraway land. Thank you very much? 海外の皆さん、こんにちは。日本は今夜の2時です。 リモートワークのおかげで、この時間まで仕事ができます。 ScrollTriggerでアニメーションをしたいのですが、私の作ったデモではどうやら難しいようです。 どうすればいいんだろうと考えて、行き着いたのが"ScrollTrigger.proxy"だったのですが、公式のドキュメントを読んでもよくわかりませんでした。 まあ私がDeepL越しでしか英語を読めないのが原因なのですが。。。。 もし心優しいGsaperがいたら、どうすればScrollTriggerをデモで動作させることができるのか教えてください。 もしご協力いただけるのであれば、遠い島国からあなたの健康をお祈りします?

I'm using the vanilla codepen script attached to try to achieve horizontal scrolling going to the right instead of the left. Does anyone know how to do that?

Hi, I am fairly new in gsap as well as JavaScript and I just started working on something to give it a try. I'm trying to achieve a fairly simple effect based on horizontal scrolling. The idea is to make a section in a webpage in which the background image/color and background animation is fixed to that viewport but the contents (like title, subtitle, etc.) scroll horizontally....

Hey! I have a problem with ScrollTrigger, I have a container with images and I want horizontal scroll for them and some additional animations, So I took working code and tried to take ScrollTrigger and put it directly inside timeline, but can't understand why it's not working. As you can see in commented area is working code. Can you help me, please?

Hi, I'm new here and I hope I do this correct ? In my codepen I think you can see what I'm trying to do. The page scrolls vertically until it gets to the projects-section where the pages starts scrolling horizontally until the last contact-section. Now, everything works, but I'm not happy with the result. 1. When you scroll down, and leave the last project, the page kind of takes a "shortcut" down to the contact part. In reverse the same happens when you leave "projects" and enters "about". I believe this has to do with the scrub-function(?), but is there a way to get around this? 2. The horizontal part scrolls smooth, but too fast I think. Help please. 3. As mentioned, the horizontal part scrolls smooth, but not the vertical. Can I wrap the whole thing in another scrollTrigger and add a scrub, or is there a better way to get smooth scrolling through the whole page? I know it was a lot, but if I just could get a hint on at least one question I would be super thankful. Cheers

Hi all.. I'm just trying to re-create some awwwards.com websites with horizontal scroll using gsap and using the codepen attached as a base. My question is, how then do I initiate further gsap animations inside each section? For example, if i wanted to add a simple gsap.from(..{opacity: 0}) on the text in Part Three, how do I get the scrollTrigger working now that its on horizontal scrolling? Sorry if this has been asked before, but I cant seem to find any forum answers around this and really struggling to work it out myself.

Hello, I'm using Gsap Scroll Trigger with my all my entire pages. I have multiples sections. Every section has different child element. I want to know if it's possible to handle specific part of sections (for example, 15% of a specific one, the same as I do with normal vertical scroll ). But I don't know how to do it and I don't know if it's possible. Praticale example: In the codepen i want something like this this: Apply different animations on different child element of the same parent (.red) relatively to the actual parent that is in the viewport. Thanks for your help gsap.from('#text-1', { opacity: 1, x: -300, scrollTrigger: { trigger: '.red', start: '80% 50%', end: '+=500', scrub: 1, }, }); gsap.from('#text-2', { opacity: 1, y: 300, rotate: -90, scrollTrigger: { trigger: '.red', start: '60% 50%', end: '+=500', scrub: 1, }, });

Hello, so I created a new topic regarding my problem. Basically I have a structure similar to demo in codepen: https://codepen.io/luk-z-horec/pen/RwrYmvR What I need is to animate elements inside every section when they appear in the viewport. Now they animate all in the same time. Next question: it is possible in onEnter callback also have an element which trigger onEnter callback? Thank you for your help.

Hello! I hope you guys are doing good. I have a question about Horizontal scrolling in react. I have attached my code pen to illustrate my issue. I created a ref for the timeline and then an array of refs to attached to the panels to emulate the document.querySelector(".portfolio") variable as seen in this CodePen and since i cannot set overflow-x: hidden to my body, I made a page wrapper that does that. However, the horizontal scrolling does not work but other animated element like the image fading in and the parallax effect of the title works. What am I doing wrong and what can i do? Thank you guys so much for all your help now and in the past! Here is my CodeSandbox

Hey guys, I have a question regarding this plugin. I have a website that uses horizontal scroll, the main div has children sections and the sections have their content. Now a I have a separate navigation menu on top and what I need to do is to show which section you're in, so I need to track when a section has pass the middle of the screen so I can highlight the navigation menu. It's there a way to do this with this plugin. I don't have a codeped but here is the link to my website https://dev-shapetx.pantheonsite.io/ This is the code that I use to initiate the plugin this.scroll = gsap.to(this.container, { x: () => -( (this.container.scrollWidth - document.documentElement.clientWidth) ) + "px", ease: "none", scrollTrigger: { trigger: this.container, invalidateOnRefresh: true, pin: true, scrub: 0.2, end: () => "+=" + (this.container.scrollWidth - document.documentElement.clientWidth) } });

Hello, Here are some requirements for the page I need to build: - Must scroll horizontally, so using mouse wheel and arrows would scroll the page horizontally. - Content sections would have different widths based on the content in each section (so not 100vw as I have seen from the ScrollTrigger examples, also have noticed that the width of the container is set to the total width of the content sections. So 6 sections would equate to 600% width set via the css). - Each section will have different parallax/animations upon entering the viewport. - There will be a navigation with scroll to anchor links. - This will be desktop only use case, so I do not have to consider mobile views. I have looked into ScrollTrigger and ScrollMagic and as noted above have seen that the widths of the content are 100vw. So is there a way to have differing content widths if I go this route? I also came across this repo: https://github.com/oberonamsterdam/horizontal So with this background being defined, my question to anyone with any experience building a page/site with horizontal scroll is what method has worked well for you? I am planning on using Gatsby.js and gsap regardless but am more so asking if ScrollTrigger horizontal is viable solution or is there something else better to us for this part? Thank you in advance for your feedback, Frank.

There is a problem with gsap ScrollTrigger issues when try to achive horizontal scroll effect on those section and then end of ehis section going to next section. But the problem is when i added pin:true the specific section it's scroll but not pinned on that moment also the next section is moving up before finish the horizontal scroll finished. what i want to achieve https://drive.google.com/file/d/1SpJS5NxL0yK2hs1Ou7G3LSQ3gkvdhcWL/view And What i am facing problem with scrollTrigger when pin:true https://drive.google.com/file/d/1rHEMFfC8JB6GGOEH6MAa8t2jsvdBSXi4/view Here Is my code for Horizontal Scroll with ScrollTrigger let container: any = document.documentElement.querySelector( '.brand-showcase' ); let tl = gsap .timeline({ scrollTrigger: { pin: true, scrub: 1, trigger: container, end: container.scrollWidth - document.documentElement.clientWidth, }, defaults: { ease: 'none', duration: 1 }, }) .to( '.panel-section', { x: -(container.scrollWidth - document.documentElement.clientWidth), }, 0 ) .to( '.panel-item', { opacity: 1, scale: 1, duration: 0.6, stagger: { amount: 0.8, }, }, 0 ); Here Is The HTML Structure for every scroll-item <div class = 'brand-showcase'> <div class="brand-strategy-showcase-container"> <div class="panel-section"> <div class="panel-item"> <div class="showcase-content"> <div class="bss-title">Brand Research & Strategy 1</div> <div class="bss-content"> Spending quality time with our clients in order to uncover what your brand really stands for is by far the most important step. After taking an objective look at your industry and key audiences, we will articulate your purpose, proposition, and personality. From there, we will be able to create experiences that will connect your brand with your customers. </div> <ul class="bss-list"> <li>Market & Landscape Research</li> <li>Market & Landscape Research</li> <li>Market & Landscape Research</li> <li>Market & Landscape Research</li> </ul> <a href="#" class="btn co-btn"> view Project <div class="icon"> <img src="@/assets/img/next_icon.svg" alt="next" /> </div> </a> </div> <div class="showcase-sticky-img"> <img class="item-img" src="@/assets/img/brand-showcase-sticky-img.jpg" alt="Brand Image" /> </div> </div> </div> </div> </div> Hope you understand my issues. Looking for the help from the team gsap or any other coder with gsap master. Thanks in advance

I was wondering if I can horizontally scroll through an image gallery with css grid using scrolltrigger? I would like to scroll using my own custom scrollbar, and or be able to scroll horizontally using the mousewheel through the gallery! Also, if possible have it loop where it goes back when I scroll past the last images back to the first images of the grid that would be a plus! Most importantly let there be no visible default scrollbar shown! I see so many tutorials focusing on flexbox and or 1 page sliders where each child element of the parent div is on another slide, but that won't work as I have my gallery in a 3 x 3 layout instead of a 1 x 9 layout. Also, I have seen tutorials with gsap + scrollmagic but I would rather not use scrollmagic if I don't need to with scrolltrigger. Would love and appreciate the help! I am still pretty new to javascript & GSAP in general, but I have looked through so many tutorials, downloaded plugins, etc. and nothing has really worked for me to the point where I feel like I can move on, especially when I know most of what I am looking for is on websites like this http://www.jeanhelfenstein.com/