Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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



Found 14 results

  1. 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
  2. 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?
  3. 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
  4. 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.
  5. 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); });
  6. 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 nav
  7. 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
  8. 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 a
  9. Hi guys, I'm doing my very first steps on GSAP, and it is actually pretty impressive ! But I have a little problematic piece of work. I'm building a website where there's an horizontal scroll. Basically that are divs next to each others and I translate them on scroll. I want to animate on scroll some of element in those divs. But it seems scrollTrigger and horizontal scroll ain't friends at all. More exactly, the animation is triggered when the page is loaded, not when the element enters the viewport. So I decided to reproduce that in a very simple way ( that's
  10. Hi! I'm struggling with horizontal scroll implementation. The main goal is to change default vertical scrolling to horizontal and based on actual position, background opacity which is fixed and on center of my screen. In image below I tried to visualize it Based on codepen, I've created my implementation with gsap + scroll magic. Unfortunately I couldn't achieve smooth scrolling with it, so result isn't satisfied me. Here is a example of how smooth scrolling could looks like. https://codepen.io/Faelivrinx/pen/MWaOaVv I was tr
  11. I already tried different CSS approaches to create a horizontal website (FlexBox based, Grid CSS based, "transform: rotate" based) and every one of them looking like an odd hack and not like the proper way to do it. I've spent too many weeks to build my website with each of this approaches, but every iteration I drowned in tons of technical problems because of that chosen way of implementing (like inability to use "position: fixed" and "position: sticky" on child elements, when his parent has been rotated). My colleagues give me only one direction to find a better solution - "use JavaScr
  12. I'm working on horizontal website and finally I've found some solution for smooth scrolling. I resigned for ScrollMagic, cause there was a lot of problems with simple smooth effects but now I don't know how to trigger my animation. I'd like to fade-in my section which entering and on leaving fade-out it. It should work for each section. Have you any suggestions or examples?
  13. Hi, I'm trying to make a angular component with only horizontal scrolling on mouse activity. I've been trying this so long. But cannot do it. Any suggestions?
  14. I need to do a small "news ticker" type animation - it would just consist of text scrolling along a single line. I spent a considerable amont of time looking around for somethig like this, and all of the references I found were either old Flash-based things, or jQuery code that is many years old. Is there a simple way to use Tweenmax to create a horizontal text scroller? Ideally, I'd like it to just use a bunch of <li> elements as sequential text scrolls. TIA!