Failing to affect other element on scroll trigger interaction

Design help Animations & Interactions
1

Hey guys,

I’m having an issue with an interaction not being triggered on scroll.
There are two elements to this: a wrapper with background content(which I titled ‘scale wrapper’) and a wrapper with text(which I titled ‘scroll wrapper’). The conceit here is that once the text scrolls into view, the background wrapper scales down; once the text scrolls out of view, the background wrapper goes back to it’s original scale.

1428×732 915 KB

So the issue is that the scroll trigger does not cause the interaction to happen until you pull the text down all the way or all the way up to hide it again. This only happens in Safari and does not work in Chrome at all.

here’s the navigator view:

2764×1356 164 KB

the interaction is applied to the selected div — the last ‘scroll box element’

the interaction is called ‘scale down on scroll’:

472×510 29.1 KB

the interaction affects the ‘scale wrapper’:

482×832 48.3 KB

484×932 22.9 KB

here’s the preview link: https://preview.webflow.com/preview/idubbbztv?preview=9d4903245c68b3d6d6dac76eda7364f0
(having an issue on the About page)

I’m not super-experienced, so I might be making a dumb mistake that I can’t identify, so take a look and let me know.

Thanks!

2

I see that you have your elements within a 100VH, overflow:hidden parent element.

this is what might be causing the issue. removing the overflow and see what happens.

3

Removed overflow and height parameters, the issue still persists.