Scroll into view section animations not working properly? (+ video optimization question)

Hi everyone, I’m new to webflow and am trying to build my portfolio site, which contains a few portfolio thumbnail sections like this (ignore the placeholder text/videos haha):

I’ve tried setting up animations with the intention of having each section background image fade in to 25% opacity, the text fade in completely from 0% and move from the left slightly, and the video fade in from 0% and move from the right slightly when this section scrolls into view. When the section scrolls out of view, I’d like those elements to all just fade out in place. I tried applying this interaction to the section container class since ideally, this same animation/interaction would happen automatically no matter how many portfolio thumbnail sections there are.

When I test it out, it just seems broken, like the animations aren’t triggering at the right time/are looping weirdly/interrupting each other. Here’s a short video to demonstrate what I mean, as well as a preview of the intended animations in the interactions editor: Video of funky animations

Also, I’m wanting the site to have a fair amount of images/video content. But right now, even though I have done my best to compress the file sizes of the videos as small as I can without losing quality (right now they’re ~2-3mb), the site seems to run kind of slowly. Is there a way to load/unload (or enable/disable) the videos depending on if they’re in view or not to help with page speed and load time? Does anyone have any recommended video export settings for optimal web usage? I’ve seen other sites out there that have a lot of video content and they run pretty smoothly, so what would be the best way to optimize a site like this on Webflow?

Here’s the public read-only link: Read-only version
And here’s the published page link if you need it: Published page link

Any thoughts or advice would be greatly appreciated. Thanks so much!


Hi @jacobp,
Welcome to the forum :webflow_heart:

First, try to keep each post focusing on one problem. It will make them much more approachable and less long to read (which in these days is a turn off). Good thinking with the screen cap!.

Now, regarding the scroll into/out of view -
Not all of your elements in the interaction are defined as “only children with this class”, which affects all the elements with this class on the page.

This might be also the reason the sites feels so heavy. Try fixing this first problem and we’ll see about the others next?

Hey @avivtech, thanks very much for your reply. I did as you suggested and I think that did start to clean up the animations a bit. When I first made this change, the ‘scroll in’ animations worked well but the ‘scroll out’ didn’t seem to be working so I deleted and recreated the scroll out.

But now the scroll out seems to be working okay, but the scroll in is… half-working? Sometimes the elements move but the opacity of the elements seems to no longer function. Or if I trigger the scroll in, then the scroll out, then the scroll in again on a section it will fade in but not animate. When I preview the animations in the interactions menu it seems to work okay (though if I hit the play button in the scroll out animation then nothing happens?). The site feels a little more responsive, but still slow overall.

Here’s what I mean: Loom | Free Screen & Video Recording Software | Loom

Thanks!

Try having one of the interactions work without initial states at all. Since these are the same elements you animate, you get a conflict having different initial states.

Ahhh, you’re a genius, that cleared up that issue - thank you!

The only minor hiccup is that after the first scroll-in animation, the text no longer moves (but it still fades in okay, so I’ll call it ‘close enough’ for now).

I’m still running into super slow performance though so I’ll keep searching around for solutions on working with video and seeing if there’s a way to effectively load/unload them.

Thanks again!

1 Like

Happy to help :smiley:

Regarding the slow performance - Try removing the blur effect. Do it in photoshop and not in CSS.

1 Like

Okay great! I’ll give that a shot. Cheers!!