Hi, after I completed my first site. I realized I don’t really know how to create a hero animation or splash screen in webflow. Actually I think I have a vague idea on the process but I don’t really know how to get started and do it. Are there resources or tutorials to check out? Yes the webflow university has something on 4D cinema, I’m looking for something to start with little steps, preferably something other then Adobe after effects.
Also what’s the most efficient way of working on animations and then reproducing on webflow?
How can you use Figma to create your animation and then just use Lottie to create animation format and insert into webflow?
Yes! Use a graphics program with artboards. Each artboard will be the first scene action; artboard 1, 2, 3 and so on. Each one represents an animation set. But understand in Webflow, they all should be in the one big interaction. You can’t separate them out because the timer is not sequential. It’s a little bit of trial and error on the delays and gaps. If you create the animation in another program then you simply add it as a video file.
There are times when you can add multiple interactions, but that’s complicated and beyond the scope of a text response. I recommend artboards that you can visual see where the objects should be on the page during each step. Hope that helps.
I’ve recently developed my splash screen. In terms of sequence, do I create a new page and build the section, and just slot in the lottie animation? And in terms of sequence, how do I arrange that when the user visits the site, the splash screen is the first thing they see, is there something I must do in the navigator?
In Webflow, you’ll add the animation all in one animation set. So if there’s multiple phase to the animation you stack them in the interactions panel; separated by a gap. This is done manually in the panel.
If you plan on inserting a lottie or any other animation created in another application, that’s done by inserting an embed element and placing it over the other content.