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. Hi Friends, Recently I make this horizontal scroller tab: Everything Is ok but when I scroll it for horizontally and then I clicked one of the tab button and it Begins again from where it ended, and this problem clearly show in my react js project and codesandbox. Please Kindly Check my codesandbox link. Now, just I want to start it from beginning when I click a new tab button. Here is My Codesandbox Link For You: https://codesandbox.io/s/fix-this-tab-the-problem-kskoe3?file=/src/App.js Please Solve It For Me☺️ Codepen Link:
  2. I have six sections. Three sections contain buttons. I want to switch between using the scrollbar to advance to the next section in sections 1-3, using an onClick event to advance to sections four and six, and using a setTimeout to advance to section five. Sections 4 - 6 must also be hidden until triggered by the onClick or setTimeout. I can easily show/hide elements and trigger scroll in native .js, but have been struggling (for several days) to do this with GSAP. I'm sure that a lot of GSAP newbies will find this helpful. Thanks!
  3. Hello, I'm using ScrollTrigger animations to animate a main object. It is fixed from the start but at the third section, when the horizontal scroll starts (orange section), it should stay inside the section and scroll horizontally as it's inside the first slide. In few words I tried to pin the black element when the scroll reach the end of the orange section. I tried to change position dynamically (from fixed to relative) but it makes it doesn't work at all. Anyone can help? Thank you in advance!
  4. 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
  5. Hi guys, sorry that I have to ask but I'm always running in the same issue. Don't want to disturb you guys by saying I'm a newbie..but actually I am. I started by taking the horizontal scroll container codepen demo of Greensock and integrate a grid overlay in the second container. It works, but after the grid container there is a white space which is not wanted and the last sections width gets broken. I realy don't get why, could you pls give me an explanition and help me to solve the white space issue? Further I want that fire an scroll animation when the container is in viewport, tried this with the following lines but it doesn't work. The goal should be that the view autoscroll to the end of the section for the first step and then scroll backwards to middle (50%) of the same section. I integrated the ScrollToPlugin so I don't know what I forgot - if you recognize the reason pls let me know. let tl = gsap.timeline() .to(redContainer, {duration: 2, scrollTo: () => "+=" + document.querySelector(".red").offsetWidth}); Thanks a lot guys!
  6. I want to change my horizontal scroll element click on tabs . I try it in my main project but I can't do this. Codesandbox Link : https://codesandbox.io/s/horizontal-tab-content-xfwmwn I just simply make this template for fix this. so, please help me to complete this. Please Thanks..
  7. Hello, I made a copy for the gsap animation in the sample codepen link. But it doesn't work like the effect example, it takes the styles but there seems to be a shifting problem. Can you help me? Example; https://codepen.io/GreenSock/pen/JjYPgdp My Pen;
  8. Hello, with vertical scroll, we can make parallax or scrolling effect very simply with data-speed="value". How can we do this with horizontal scroll? Is there a method? An example I created to do this; https://codepen.io/sukruemanet/pen/dyKWeOg
  9. Hello, I want to make a stream like on this site. I partially succeeded, but I can't control the parallax. The parallax in the blue background that comes after CHAPTER 01 comes into play long ago and the right part looks bad. Actually, I have to give a container a 100% width and the main container a 300% width right now, I couldn't get it to get the width automatically. Can you help me? My sample site https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html
  10. Работаю вторую неделю, помогите ребята. Мне нужно сделать горизонтальную прокрутку для всего раздела. Пример с этого сайта , там тоже используется Gsap, но я не вижу его кода Это должно быть так https://karinasirqueira.com/projects/mailchimp/
  11. Hi folks I am using trying to use this technique Animated horizontal scroll technique in m y project but when I am using it the normal page scroll stop smooth scrolling and page get disturbed. * in my code i just add 2 parent divs ( <div id="smooth-wrapper"> <div id="smooth-content"> ) and its code let smoother = ScrollSmoother.create({ wrapper: '#smooth-wrapper', content: '#smooth-content', smooth: 1, smoothTouch: 0.1, effects: true }); After adding this the horizontal scroll get discrubed. Thanks in advance
  12. Hello everyone, I tried to search the forum but I didn't find any project regarding horizontal scroll done in NextJs, could someone kindly point me to it? Thank you very much and have a nice day
  13. I have 4 boxs created by boostrap I want to make horizontal scroll when i scroll down but i can't i tried everything with no results <div class="edition"> <div class ="container" > <div class ="row" > <div class ="col-3" > <div class =edition-box"" >....</div> </div> <div class ="col-3" > <div class =edition-box"" >....</div> </div> <div class ="col-3" > <div class =edition-box"" >....</div> </div> </div> ><¬> </div> </div>
  14. Hi. Could anyone help me to add animation to horizontal text block I'm trying to do? Like here: https://locomotive.ca/en Latest award section (third section on homepage). So the text is scrolling slowly, depends we scrolled down it go right->left, up it start scrolling left->right. I have done that, but I would like to have like the example above, so it scroll looped (slowly) all the time, and speeds up when user scrolls. Thank you for the help! Thanks, Lukas.
  15. Hi I was wondering if there are any codepen out there that helps to understand how to apply independently multiple scroll trigger without timeline Im trying to implement sticky position horizontal scroll in webflow https://imgur.com/a/mgiAnPg where the 1st scroll trigger is vertical and the 2nd is horizontal My question is, is it possible to have 2 different embed script to implement this or they interfere? If it is possible, by any chance are there any example out there in GSAP repository?
  16. I'm very new to GSAP and trying to practice with a very simple horizontal scroll. I've been using this example as a guide with a few changes to make it work with Nuxt3/composition API. https://codepen.io/GreenSock/pen/YzygYvM I'm also working with Tailwind but this isn't working the the CodePen, so I've included the style section too. In my actual app, the site isn't scrolling horizontally and just scrolls down a very tiny amount (like half of the one) and that's it. How do I get it to scroll horizontally? The example has a vertical scrollbar but mine only has horizontal? Have I missed something here? I've recorded my screen to show you what's actually going on on my screen because the CodePen doesn't seem to be representing this in the same way. Video in link below: https://drive.google.com/file/d/1iB5rQiR58bd0EjQyoXuwC-sUAb6Y1Sii/view?usp=sharing Thanks in advance for any help!
  17. Hi, Hoping that a genius in these forums can help me out. I've got a project which is using horizontal scrolling, scrollTrigger and smoothScroller. You can view it here: https://orconeau.com/cecilstreet/spaces/location/ The issue I'm having is that when the user scrolls towards the end of the horizontal scrolling section, it's adding a huge gap and not stopping on the last section with it centered. I've spent hours trying to tweak the math but I just can't get it to work properly and I'm pulling my hair out. Happy to set up a codepen but I wanted to see if anyone could have a look at the STAGING link and the code that I'm using and maybe make a suggestion. The CSS is: [data-component="horizontal-scroller"] { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; .cards { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; flex-shrink: 0; gap: 10vw; .card { width: auto; height: 100%; display: flex; align-items: center; flex-shrink: 0; justify-content: center; background-color: blue; backface-visibility: hidden; overflow: visible; padding-top: 101px; padding-bottom: 120px; box-sizing: border-box; .inner { height: 100%; position: relative; will-change: transform; transform-style: preserve-3d; } picture { img { @include app-breakpoint-3 { width: auto; height: 100%; } } } &:nth-of-type(odd) { background-color: purple; } } } } The javascript is: const horizontalScroller = document.querySelector('[data-component="horizontal-scroller"]'); const horizontalCards = horizontalScroller.querySelector('.cards') const horizontalCard = horizontalCards.querySelectorAll('.card') gsap.set(horizontalCards, { marginLeft: '50vw' }) gsap.set(horizontalCard, { perspective: 750 }) const smoother = ScrollSmoother.create({ smooth: 1.5, effects: true, smoothTouch: false }) const horizontalTween = gsap.to(horizontalCards, { x: () => { return -((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2)) }, ease: "none", scrollTrigger: { trigger: horizontalScroller, start: () => "top top", end: () => `+=${((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2))}`, scrub: true, pin: true, markers: false, invalidateOnRefresh: true, anticipatePin: 1 } }); horizontalCard.forEach((card, i) => { const content = card.querySelector('.inner') gsap.set(content, { rotateY: -100, rotateX: 25, yPercent: -10, scale: 2.5, xPercent: 100 }) const tween = gsap.to(content, { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1, force3D: true }) ScrollTrigger.create({ trigger: card, containerAnimation: horizontalTween, start: "left 75%", end: "50% 50%", scrub: 1, markers: true, animation: tween }); }); I've got the horizontalTween working and then I have an animation for each .card element inside the scrolling .cards section. The animation in there is doing some funky transforms and the issue is that the scrollWidth is including the transforms when it's determining the width of each card. I think. When I turn it off, the scrolling overflow is better but I lose the effect. Any help would be greatly appreciated. Thanks
  18. Hello, I'm new to Greensock and I'm loving it however I have hit a blocker and wondered if someone can help on the 2nd panel with the map, it should stop and reveal 4 map pointers and text, then carry on to the 3rd panel. I can get this to work on a vertical scroll see codepen link
  19. I have trouble with the margins of my slider container once I finish scrolling. I bet this is because of conflicts with another scrollTrigger, which should enlarge the backgrounds of similar sections on the scroll. Unfortunalety this is my first use of GSAP and I can't understand how to fix it. Just scroll my Pen and notice how Our Products text is jumping. You might need to open it in Codepen, looks like this problem is not reproducible in the widget. Thanks in advance!
  20. Hi, I've got ScrollTrigger on a project and have implemented the pairing of horizontal and vertical scrolling. You can view the example code pen in this post. What I'm trying to do now is do some cool effects on each section as it scrolls into and out of view. I love this example: https://digilab.kunsthaus.ch/en/exhibition/ausstellung-zur-eroeffnung-des-kunsthauses-am-heimplatz?group=switzerland Hoping that someone very talented in these always helpful forums could point me in the right direction. Thanks
  21. Hi, I'm having issues trying to get horizontal scrolling and vertical scrolling working correctly using ScrollTrigger. I used a starting point from this great CodePen example: https://codepen.io/nicvh/pen/gOeZKOJ What I have done is actually have the horizontal scrolling panels be various widths as that is what is going to happen on the final project and have made the horizontal scrolling sections appear first before the vertical scrolling sections. As you can see from my CodePen example, there seems to be a huge gap at the end of the horizontal scrolling sections. If I make the individual scrolling panels 100% width then it works but for some reason, the x: () function is returning the incorrect value. I've been racking my brain on this for hours and am hoping that one of the geniuses in these forums can help me out. Thanks
  22. Hello everyone, I'm trying to make a timeline here, but I don't know how to use the horizontal scrolltrigger. I also want the images to parallax horizontally, and I want them to go left and right as the scroll moves. Finally, I want to give the opacity active value of 1 for the circles with low opacity in each pass. Thank you very much Example; https://transmissions.cristobalbalenciagamuseoa.com/2019-21/maissane-zinai.html
  23. Hello, Please I need help recreating this using gsap because i want to have smooth scroll. Every attempt I made using gsap meant that I lost the infite loop effect. I really do not know how or what to do. I went through this demo it did not have an infinite loop and also I did not really understand the code. I would be glad if i could find a solution with helpful explanations so that I learn aswell.
  24. 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
  25. 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.