Jump to content

Search the Community

Showing results for tags 'horizontal 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


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. 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. Hi, guys! I'm trying to achieve pinning bottom title of each section in horizontal scroll until section rich screen right side. Can't calculate correct end value for first section title and start/end for second section title.
  3. Is it possible to pin a section within horizontally scrolling container? I know I can "fake" it with a timeline, but was wondering if there is a more automated way.
  4. Hi! So I'm trying to get the .stagger-text class (which moves each word in a sentence upwards on-load) to happen when each isolated item with the class .stagger-text is visible on the screen, I've tried using a forEach loop to apply the ScrollTrigger but that seems to entirely break it (so I clearly did it wrong!) I'm also trying to delay the speed at which the items scroll, which is clearly simple enough... if I were creating a vertically scrolling site. As you can see they scroll down vertically as opposed to horizontally. I feel like these issues are somewhat linked because the site is 'artificially' horizontally scrolling they are all inline and being triggered at the top of the page, which is technically the whole thing, if that makes sense? Hope someone can help! Thanks in advance, Ben Elwood
  5. Hey guys, I met GSAP today and I was impressed with the quality of animations that it is possible to do, I found an example of how to make the horizontal scroll using vanilla js, someone who has already done it using react can give me an example of how to make this type of animation. Thank you very much :D
  6. Hello, I would like to accomplish the following: Step 1. Scroll down to horizontal scroll section. Keep scrolling until image sequence finishes in slide 1. Step 2. After image sequence is finished, we need to horizontal scroll to slide 2. Then, we need to animate a background image position in slide 2 with some overlay text. Step 3. Stop horizontal scroll functionalities and scroll to rest of the page See attachment for a visual explanation. I have a basic understanding of ScrollTrigger, but I think this is a trick which can be implemented in a very specific way. Can someone please help me with this? Thanks!
  7. Hi, how can i create anchor links for a horizontal scrolling? My version is not working correctly: $(".menu-item").on("click", function (event) { event.preventDefault(); var id = $(this).attr('href'); var left = $(id).offset().left; $('body,html').animate({ scrollTop: left }, 1500); });
  8. Hello there, I have this script in use and it works great. My question now is, how to add a stop at the last slide and start the vertical scrolling with a button. Is that possible? Thanks for your help! Mirja
  9. My goal is to create an effect where I reveal a section with horisontal scrolling sections. Though the horisontal scroll should not activate before the last cover has been scrolled away first. I have create a screen recording of the desired result here: The problem I am facing is that the horisontal scroll behaviour is initialised before it is visible, so one can never get to see the first slide.
  10. The GSAP plugin is amazing, and I've had some luck implementing some things on various sites. However, I'm trying to design a section for my new website, and I'm running into a wall. I've reviewed several CodePens, and done a ton of Googling, but I just can't seem to combine the various demos I've found. The demos I've tried to work off of include: https://codepen.io/akapowl/pen/abmpGQv/d076a9cf4c1a952a0bc921a76bc2202f (Fake Horizontal Scroll with Fake Pin) https://codepen.io/GreenSock/pen/YzygYvM (Horizontal snapping sections) https://codepen.io/GreenSock/pen/ZEpNLZa (Animate horizontal sections) The idea is this: the user scrolls down to this section. The section is pinned in place. As the user continues to scroll, the first "tab" delineated by vertical dashed lines scrolls into place overtop of the Digital Marketing tab. The content in that tab is scrubbed in with opacity changes, or perhaps with a toggleClass on that tab. Once that tab is revealed, the next one slides into place, and so on until each tab has been revealed, at which point the pin is revealed. When the user scrolls back up the page, the whole thing goes in reverse. As you can see in the CodePen I've submitted, I have made some limited progress, but I can't seem to get it to go full width. I also don't understand how to apply this successively to each tab, one over top of another. If anyone could lend a hand or point me to the right direction, I'd appreciate it very much.
  11. 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
  12. 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
  13. Hello ! I'm new with scrollTrigger and I don't understand how I can pin elements inside my horizontal scroll section. For example, in this codepen : https://codepen.io/PaulettePaillette/pen/MWjeqdb I would like the scroll to stop when the number 3 (grey div) "touch" the left side of the screen. And then the number 4 scroll above the number 3 section and the classic horizontal scroll continue. I think it's possible, I hope, but I don't understand how to make it. I hope my issue is clear, and someone could help me on it. Thanks
  14. 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🙂
  15. 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
  16. 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!
  17. 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?
  18. 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??
  19. 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.
  20. 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.
  21. 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
  22. 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
  23. 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!
  24. 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をデモで動作させることができるのか教えてください。 もしご協力いただけるのであれば、遠い島国からあなたの健康をお祈りします🙏
  25. 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?