scroll snap behaviour with transform

44 Views Asked by At

In my project there is a section in which there is an image on the left and some text on the right. On scrolling the image goes up and the next one appears from below and the text disappears to the left and the next one appears from the right.

The image side should work like this: https://i9gwuc.csb.app/

The text on the right is supposed to be something like this: (only shows one at a time) https://www.hover.dev/components/carousels

This can be done easily with the transform property like it says in the link but it doesn't have the scroll snap behaviour.

If I set the scroll state from js then the scroll snap doesn't work as expected, even with the thing in the following link. https://github.com/argyleink/ScrollSnapExplainers/tree/main/js-scrollToOptions_Snap-Additions#1-basic

The last thing I can think of that somehow make the transform behave like scroll snap.

Has anyone encountered this problem before?

0

There are 0 best solutions below