Getting Started with Animations in Webflow
Traditional CSS keyframe animation can be tricky, but luckily Webflow makes it pretty easy. In this article I’ll show you how to make an easy loading screen animation. The final product is viewable here.
We’ll start by adding a new Page Trigger animation. This type of animation is triggered by events in the actual page (in this case when the page is finished loading), versus Element Trigger animations which start when an element is interacted with/scrolled into view.
We first need to set the initial state of each element before the animation occurs. In this case we have two separate h1 elements (one for “Brad” and one for “Carter”) that are set to an initial y state of 8vh so they start below their actual position. In order to prevent the scroll bar from showing during the animation, I’m also setting the initial hide/show property of loading-screen (the parent div with the dark gray background) to a visible state (in this case flex) because we’ll be animating it to none at the end of the animation. This also means home-page’s initial state (the parent div with the light gray background at the end) will need to be set to none initally, and animated to a visible state at the end (in this case grid). Lastly, I’m setting the initial state of content (an inner div directly below home-page) to have a y value of 24px and opacity of 0 — this is so “Digital Designer + Art Director” can fade up at the end. That was a lot of information but all you really need to know is that we’re setting the initial state of each element here.
The next steps are a little more straightforward. All we’re doing is animating each of our h1 lines to a y position of 0 (the actual position we want the elements to end up at). Both have a duration of 0.8s with ease in out timing function. The most important thing here is that the second h1 element “Carter” has a delay of 0.1s more than the first h1.
The next step is to animate them back down again, so we’ll give them a delay of 1s and 1.1s respectively (for the staggered effect) and animate the y back down to 8vh.
Almost done! Now we just need to fade out our loading-screen opacity to 0, our home-page hide/show to grid, home-page opacity to 1, and move that content div to y = 0 so that “Digital Designer + Art Director” fades in and up simultaneously. At the very end of our animation we’ll also change loading-screen’s hide/show property to none so that it’s no longer being rendered behind the scenes.
That’s it for our load screen animation! Lots of specifics here but the main concept behind Webflow animations is setting an initial state, animating each element to a certain spot and tweaking delay/duration to get the timing right. Feel free to experiment with this concept for more advanced animations.
