I have a website with several elements with scroll animations on components that are currently unused, as the client can’t gather the necessary data and want to publish without those parts.
So I’m wondering if by setting display:none, to cover the items momentarily, the related animations would be performed anyway although invisibly (affecting performance for no reason)?
If this is the case, what could be an alternative solution hide the items so that there is no unnecessary processing?
To my knowledge it is a bit of yes and no. The element isn’t actually being animated because it isn’t being rendered by the browser, but both the page html and the scripts generated by the Webflow interaction engine still exist and are completed whether they’re displayed or not.
For example on my site I have a page load animation set up.
The timed animation both effects the page loader element which sits on top of everything else, and elements on my page once the loading mask has disappeared.
My lottie animation is set to take 2.5 seconds to complete, the rest happens afterwards. If my lottie is set to display none, page-trans’s opacity animation doesn’t happen any sooner than it would have if the lottie animation was visible, it still follows the same timeline and animates 2.5 seconds after the page finishes loading. So the script is still there and the browser is executing it but it is not rendering the hidden parts in the window.
So although it is hidden there is still code which occupies space. Technically because it is code that is taking storage but not being used it could affect performance, the likelihood of it being noticeable is low I think. Someone else could probably weigh in better how this could affect performance.
