Most of all the popular mobile apps out there have a splash page that users see when the app is opening. This a great way for brands to market their brand to their users.

But what if you wanted to add a Splash page to your website?

To all my #NoCode builders out there it’s easier than you think, especially if you’re used to using Webflow.

Follow these instructions and you will be good to go:

1. Create a new project or enter your existing project.
2. Create a Div — name this Div — “Splash-page-wrapper-div”
3. Give Splash-page-wrapper-div position of absolute
4. Give Splash-page-wrapper-div a 100vw width and 100vh height.
5. Give Splash-page-wrapper-div a background-color
6. Add a “Lottie Animation” to Splash-page-wrapper-div and name this Lottie Animation — “Lottie-splash-animation”
7. Give Lottie-splash-animation a height of 50vh
8. Head over todownload an animated illustration as a .json file or use your own .json file.
9. Upload this .json file to your media files inside of Webflow.
10. Click the Lottie-splash-animation and replace the image with the .json file you just uploaded.

You now everything set up for your splash page now we have to add animation to this splash page so it goes off the screen after a couple of seconds.

Click the Splash-page-wrapper-div and head on over to the animation tab in Webflow which is in the top right of the page… look for the lightning bolt.

Once you’re on the animation page choose the “page load” option:

Once you’re there set Splash-page-wrapper-div to the following:

Select the “move” element and then copy it and set that copied “move” element to a delay of “3” (after three seconds your splash page is going to shoot off the screen).

Once you have both these elements sets you will need to set their values. For the first move element set the values to this:

Make sure “x” and “y” are set to “0” and give this element an “Ease in Out” transition.

We have to do the same thing for element two:

Give this element an “x” value of 0 and the “y” value of -100vh with a transition of “Ease In Out”.

Now close out of this window and head over to the preview you should see your animated splash page.

Did this article help?

If it did we're glad, No Code is a very powerful tool. Since we helped you out we would love for you to help us out by checking out our product ZoZo.

ZoZo allows you to access photos, links & files you want to share at any time with Keyboard Shortcuts. We allow you to quickly save and share content without having to go and dig for it.