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?
Any thoughts or advice would be greatly appreciated. Thanks so much!