ketchupmarketing

Very good explanation. "selector()" utility function is indeed what we were after. Marking as resolved. Thanks.

Thanks @mvaneijgen This in theory does mostly what we need. I guess we failed to mention that there could be multiple instances of this section per page. We tried to pass in Array and DOM objects in place of .scroll-card:not(:first-child) and .scroll-card:not(:last-child) based on const cards = instance.querySelectorAll(cardSelector); ( instance is the key element here ) but the above does not work. It sort of breaks both of them. Docs state that object is accepted. Wondering it is different sort of object: https://gsap.com/docs/v3/GSAP/Timeline/from()/ Thanks for letting me know about the privacy settings and the useful tip about disabling scroll trigger. very helpful

Hi Trying to create vertical scroll cards. Checked every example I could find, but they do not seem to do exactly what is needed in my case. The idea is that cards reveal themselves on vertical scroll, this part works as expected. Currently the cards stack on top of each other. Previous cards need to go off the screen ( -y axis ) as the next comes into view. Or at the very least, change opacity to 0. The problem is that cards might have different amount of content and keeping them stacked is not really great as content clashes ( please see example) We are running animation on cards array. I fee that the solution could be to run animations on individual cards, but that is something we are struggling with as pinContainers break. Any suggestion would be much appreciated.

Hi Rodrigo Thank you for the examples. I managed to do what I needed. For reference - I used one container to wrap all the sections on the page (horizontal or not) and then used "pinnedContainer" (the container covering sections) to ensure I can use the same pinned container to all my horizontal sections. Thanks again

Hi Rodrigo Thanks for getting back to me. Am I right in saying that there is no way to achieve this without grouping sections? Keeping my HTML exactly as it is? My problem is that section are dynamic on the page, so can be added or removed when needed and horizontally scrollable section might not have next sibling for example. Examples provided by yourself, although useful, do not seem to work with multiple scrollable instance on a single page. Perhaps it was never intended to? Thanks

Trying to achieve an effect where I have multiple horizontally scrollable sections between normal section on the page. Sections that scroll horizontally should be pinned during the scroll. The sample above does not work as ".main-content' is used as a pin. This setup works when there is only one scrollable section. This pen illustrates excess white space surrounding the block which should not be there. Do you have any suggestions on how to modify the code in a way that multiple sections would be supported on one page and each section would be pinned during scroll? Ideally ".block" or ".container" of each scrollable section would be pinned whilst scrolling horizontally. Thanks