Having trouble getting my sticky scroll to scale correctly across screen sizes

I’m having trouble with

Getting my sticky scroll section to scale correctly — especially the fade-out animation, which looks right on ultrawide screens but not on smaller ones (1280px).


Working in

Wix Studio Editor


Site link

https://madsfrost1.wixstudio.com/my-site-7
Example: section 3 — “Din BI specialist”.
It looks correct on ultrawide screens (1920px+), but not on 1280px.


What I’m trying to do

I want my sticky scroll section (with fade-out) to scale smoothly and behave consistently across all desktop screen sizes.
At ultrawide resolution the fade works perfectly, but at 1280px the timing and position are completely off.


What I’ve tried so far

  • Adjusted fade timing using % scroll values

  • Tested different scaling modes (proportional, fit to screen)

  • Tried modifying animation settings per breakpoint
    The issue is that changing scroll % seems to affect all breakpoints globally.


Extra context

Is the only solution to:

  • Create multiple breakpoints and adjust animation manually for each, or

  • Duplicate the same sticky section and show/hide the right one per breakpoint?

If there’s a cleaner or more dynamic way to make fade timing consistent across screen sizes and just scaling sticky scroll smooth? I’d really appreciate some advice :folded_hands:

Mads

I faced something similar once. The issue was with animation scaling — it worked fine after creating a new breakpoint and adjusting the timing for larger screens. You can try that!