Question:
I’m so curious about a tutorial or the steps to build this sticky, 3 rows of boxes situation:
Product:
Wix Studio
What are you trying to achieve:
I know how to use sticky, but I’m confused about the groundwork for this - how to make all the boxes even across the viewport without them being a grid (which I assume then doesn’t allow separate parts to move).
What have you already tried:
I built containers, but am having trouble with them being consistent in size and staying next to each other and responsive… I know I did it wrong.
However, seems you are very interested into this topic, since i see your post now second time.
What you will need is…
Wix-Animations
getBoundingRect()
Using this 2 in combination you will be able to get your wished result.
The processflow will be the following…
You scroll your page…
On your page are different elements (texts, boxes, repeaters, whatever…)
You have gereated a CODE which determine your mouse’s SCROLL-POSITION, while you scroll.
Here you can write some code, at which positions you want to fire/start a function. You of course can determine several functions on different scroll-positions.
Once one of the defined SCROLL-POSITIONS has been reached → the related function (ANIMATION) starts.
To animate a more dynamic horizonal movement of an element on your site…
You define several scroll-steps for one element, for example (10-scroll-positions).
For each of the scroll-positions you animate your element-movement.
Thanks for checking in. I was able to make this: https://shaynabcreative4.wixstudio.io/freshgroundhealth
but on my laptop, the words are at the very bottom of the container, and on my desktop, they are not (they are 30 px from the bottom and left sides, like I set the text box to be) so that’s my hurdle now… haha
