noob1337

Hi all! Tell me, is it possible to create cross-platform horizontal scrolling using GSAP? When scroll: auto and scrollbar hidden, a completely different event occurs on the PC and I cannot drag child elements in the parent to make scrolling happen.

Hey! I completely agree with you, I tried to find something similar on the forum but had no luck. I just can't even understand the algorithm of how this can be done. I can fix the container, but how can I move back? I will be glad to even explain how this can be done.

Hey, GSAP! Please give an example like this. I would like to create a similar technique, but I don’t understand how to implement it. When scrolling, our container is fixed until the visibility depth of all images that were hidden changes. That is, we must move away when scrolling in depth... I tried to draw what I mean. Happy new year! 🎁

Great!!! THANK YOU

Great! But i cant use this example for Nextjs, becouse im getting incorrect animation. Please, check it: https://codesandbox.io/p/sandbox/beautiful-newton-2knvth If I go down to the very end and come back, the animation works...

Hey! I want the behavior to be similar to the one in the video. I use the onComplete method to understand when the circle has increased and horizontal scrolling should work for me. Since mine is a circle shape, I think it would be correct to hide the circle shape and display a container with the same color. In this container, set the width of the first child to 100% and the width of the other to 50%. As you scroll, reduce the width of the first child element to 50%. How to do this correctly? I don't quite understand how to do this correctly. Tell me, how can I catch the middle of the animation in order to display the text? For example, the circle enlarged a little and the text was gradually displayed; for example, you can also see it in the video. It is also not clear to me how to determine the start and end in this code to trigger the horizontal scroll. I specified start and end, but I think that's wrong for what I need. I would like to get a comment on how to create a similar sequence for animation. I believe that it will be enough for me to suggest how to correctly implement horizontal behavior after performing an animation with a circle and simply display the container and I will try to understand how to further connect this chain and I will independently try to change the width for the next animations, and I would also like to get an answer, How can you correctly display text there in the middle of the circle enlargement animation? 2023-10-18 23-59-29.mp4

Great! I managed to do it with your help! But I don't quite understand how the start and end of a trigger works... For example, I managed to increase the size, but if I go back, the size does not decrease. I've tried different start and end values, but my options don't work. https://codesandbox.io/p/sandbox/reverent-drake-937d9k How it works?

Hey! How to fix the first block and raise the second block when scrolling? When the second block completely overlaps the first, should the standard content be displayed? How can I make a point in the middle so that it also increases smoothly when scrolling? https://codesandbox.io/p/sandbox/reverent-drake-937d9k https://www.depo.studio/