Now the question is, how do you build that in Webflow? It’s not a background video, because it doesn’t loop. It stays on the ‘flying bit’ after the initial ‘takeoff’.
Also, the animation next to the text: “Easily send requests via e-mail or SMS” looks crazy awesome. Can anyone guess where they did that?
If only I knew where I could find the people who could create these animations. I wonder how much it would cost.
The hero effect looks to be displaying a video at first that switches over to a looping animation right at the end—shown below in the code with the “intro” and “intro-loop” video elements:
This is something I’ve noticed Apple uses as well when they use spinning 3d model animations, although they mostly switch to a static image instead to ensure what’s left is very high quality (instead of a lower quality video frame).
I’m sure you can create something similar with Webflow Interactions that displays a normal video and then displays a looping video after a certain amount of time, but it would be less slicky than what you linked above. I’d imagine getting the timing right would be tricky and ultimately you’d want to remove the first video portion from rendering behind the looping animation (for performance) so I’d imagine you’d probably want to use something custom coded.
In terms of creating these cool 3d web animations, there’s been a handful of articles about Spline recently which appears to create very similar styled animations. It’s a Preview Release and currently only available for Mac (with a Windows version “coming soon”) so while it appears to be free now I’d imagine this will be a paid product when it officially launches. I work on Windows at the moment so I can’t test it out yet but it looks rad.
