Search the Community

Hi all, I must be getting scrollTrigger's behaviour wrong, but I can't figure out what I am missing since I believe to stick closely to the documentation. The content of my webpage features four sections tagged by the class .sectionContainer, each with a height equal to exactly 1 viewport. Once the user finishes scrolling, I want the page to snap to the closest position that shows one full .sectionContainer. In other words, I don't want the page to rest in between two sections. However, when I scroll through the attached example, GSAP often snaps to positions that lie in between two sections, even though I believe my snap points are calculated correctly. Also the onSnapComplete callback shows that the scroll progress at the snap point is different from the actual snap point. F.e. totalHeight of 3578px, sectionHeight of 832px and the 50px padding at the top of .contentContainer imply a first snap point of 0.0139742873113471 by the mapping function sections.map((_, i) => offSet * (i + 1) + i * sectionCoverage). Similarly, for the #secondSectionContainer, the snap point is 0.26048071548351, which seems conceptually correct to me, but the code's behaviour disagrees and snaps to a point within #firstSectionContainer. Can someone please point me to what I am missing?

I have taken a scroll effect from the codepen and tried to edit it. I want to create an effect where when the user scrolls a bit the page gets snapped to the top and also I want the page that is snapped to the top to get pin so the next page will show on top of that and while scrolling the pinned page don't scroll and remain fixed. the first problem I am facing is that pin is giving space at the top of the page which I don't want and also my page is not getting pinned and also my fifth page is not showing. why it is happening and how to solve it. (I am completely new in gsap) index.html scroll.js

How to scroll to only next element on mouse wheel and not to any other element ? how to scroll to specific element if I click from any random button from 1 - 5 ? (if I click from 1 - 5 or 5 - 1 incrementally it works fine but not with random button click) how to avoid dragging effect when I scroll in snap scrolling ? do you have any such examples where based on main div scroll, it's children is in sync ?

Trying to create a draggable snap to pages on a site: sample codepen found here: http://codepen.io/cmmize1/pen/gltzw - no ScrollToPlugin and here: http://www.pradev.com/one-page/sample.html - with ScrollToPlugin On the Draggable.create - using a type: 'scroll' or a type:'x,y' - I am having problems getting the proper snap behavior on the x axis (dragging left - see page two of the sample). Any help figuring out the dynamics of the snap values to behave proper for this type of site would be greatly appreciated. The Y scrolling snap work great. Another thing I noticed changing the Draggable.create to a type: 'x,y' - The return values for jquerys .position varies on the pages. Shows up in the function scrollTo console.log. I'm pretty sure it has to do with the wrapper div that gets created with Draggable.create - type:'x,y'? I have commented out the code for the Draggable.create - type:'x,y' so as to test both types. Thanks for any help, Chuck