Streaming live at 10am (PST)

Failing to affect other element on scroll trigger interaction


#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.

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:


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

the interaction is called 'scale down on scroll':

the interaction affects the 'scale wrapper':

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.


#4