Video & text scroll animation not working properly on mobile — want effect like Doity.de

Ask the community
, ,
1

:wrench: Current Setup

Hi everyone, I’m having trouble with the mobile version of my portfolio homepage (https://www.gabipinesso.com/). I’m trying to build an animation/scroll effect similar to what Doity.de has on their mobile site. I’d love your feedback on what might be going wrong and how to improve it.

  • Using Wix Studio with a MultiStateBox to display titles (text) + video.

  • Scroll triggers: three elements — #blacktrigger, #carvaotrigger, #mototrigger.

  • Each trigger corresponds to a state of the MultiStateBox: blacktext, carvaotext, mototext.

  • Mobile layout: each trigger is inside a section set to 100vh, stacked vertically (~300vh total).

  • Code: each trigger runs onViewportEnter to switch the MultiStateBox to the correct state.

:warning: Issues

  1. Scrolling down works fine — as each trigger enters, the text changes as expected.

  2. Scrolling up is the problem — the state often doesn’t switch back correctly.

  3. There are “dead zones”: in between sections, no state is properly active.

  4. Even with 100vh sections, the trigger doesn’t always align with the screen center as expected.

  5. On mobile, the animation feels laggy or jumps between states.

:magnifying_glass_tilted_left: Reference: Doity.de Mobile

  • On Doity’s mobile site, as you scroll, the title/background changes smoothly when the next section reaches the center of the screen.

  • It works both ways (scrolling up or down).

  • No “dead zones” or flickering between states — the effect is smooth and reliable.

:light_bulb: Questions

  1. Is it possible to achieve this effect reliably with just onViewportEnter? Or should I use another approach, like detecting when the section crosses the center line of the viewport?

  2. Would adding an offset to the trigger help? For example, making it active when its top crosses 30-40% of the viewport height.

  3. Does anyone have a working code snippet in Wix Studio that achieves this type of animation smoothly on mobile/tablet?

  4. Performance-wise: would you recommend using video as a background or as a videobox element for mobile?

:white_check_mark: What I’ve tried so far

  • Adjusted section heights to 100vh.

  • Removed large margins/padding between sections.

  • Confirmed multiStateBox10 and state names (blacktext, carvaotext, mototext).

  • Tried onViewportLeave, but it became confusing.

Any help, code examples, or layout adjustments you could share would be much appreciated :folded_hands:

Thanks in advance!

2

Hi, @Paulo_Libanio !!

That’s probably what’s called scroll snap. Normally, it can be achieved with standard CSS or JavaScript, but I think it’s not impossible to implement in Wix Studio with some code as well—probably. Wix Studio provides a Flexbox element, so first, try adding one to your page. In the element’s settings, set the Display type to Slider, set the Direction to Top to Bottom, and set the Scroll Snap Alignment to Center. Just with that, you should already have a slider that snaps neatly into place when scrolling. From there, with some adjustments using Velo code or global.css, you should be able to create something similar. And if that doesn’t work out, you can always build it using a custom element! :raising_hands:

1 Like
3

I saw you can scroll-snap with CSS but I think you can forgo that since there’s an option for scroll-snapping it within the slider layout.

image
image1141×612 112 KB

@Paulo_Libanio

I was able to recreate the desktop version quite easily but I was unable to find how to trigger based on which item you are currently based on scrolling (so I currently have it set to change on mouse-in on mobile as well).

I’ll share the template here if you want some of the work I did as a starting point.