I’m trying to achieve the same repeater-animation scroll effect as shown in https://www.wix.com/code/home/repeaters (The Diver’s Paradise Worldwide 2017)
Here’s the video extract (showing the desired animation effect):
I already contacted Wix support team who has pointed me to posting the question in this forum.
Hey RTX,
It’s going to take a little coding, but it’s definitely doable (of course, cause it’s done there).
What I’m thinking is that in each of those repeater boxes, at the bottom, there’s an invisible (colour set to transparent) object which has an onViewportEnter and an onViewportLeave event handler attached to it.
Then it calls the new hide and show functions to give that nice fadeIn/fadeOut effect. A warning though. The Javascript on Wix is not very responsive, so you’ll have issues with persons who scroll up and down too quickly. They will end up with missing boxes in the repeater.
Since the example was made by Wix (see link above), I’m actually looking for a more complete answer. It should work very well, so no issues are expected (as you can see from the video, it’s flawless).
Get you completely. Just a note that the scrolling in that example was very controlled, and slow, not a realistic use case. When last have you scrolled back up on a website slowly? I unfortunately haven’t been able to find any actual divers website on the internet. It’s possible that it isn’t actual Wix functionality, e.g. photoshop mockup or on internal project.
I mocked up something without the delayed scrolling effect, a very rudimentary version of what I mentioned earlier here - https://derrellchristopher.wixsite.com/mysite
In the mentioned example (by Wix), and apart from the fade-in/out effect, there is a different and unique position-change-effect (slide-in) for each block in a given column/row within the grid. I think then if we want to re-engineer this behavior (even using individual blocks in a group layout), is to answer how can we, on a grid-like layout, create such a liquid animation (regardless of the scroll speed).
In my opinion, this is indeed a mockup as combining multi-effects (1.fade & 2. slide-in) action (on-scroll) on a single grid/list (in a repeater or not) does not seem possible.