Davin Milan Explores Animation | Class with Editor X

Welcome to another exciting blog post from the live learning community at https://livelearning.editorx.io/editor-x-tv! As a platform that offers monthly NoCode Design Challenges with prizes and invites people to join a thriving community, we are dedicated to providing insights, tips, and techniques for building design businesses and advancing your career.

In this blog post, we will be exploring Editor X, a powerful no-code platform for designing responsive websites, with a particular focus on creating a cool loading screen animation for a homepage. Davin Milan, a successful designer with extensive experience with various design tools, will guide us through his creative process.

The Power of Editor X

When it comes to designing websites, we all want a flexible and user-friendly platform that allows for precision and creativity. Editor X is one such tool that stands out, thanks to its sleek interface and cutting-edge features. In addition to offering advanced design and layout capabilities without the need for code, Editor X is also perfect for creating elegant and engaging animations.

Setting the Stage: Building the Homepage and Loading Screen

Davin starts by selecting the main section of his homepage and setting the minimum height to 300 viewport height units using the Inspector Panel, a convenient tool for adjusting element properties like size, docking, and more.

Next, he adds a container from the Quick Add section in the Add Panel. Quick Adds are a useful shortcut for frequently used elements. He then updates the container's color, removes the borders and stretches the container so it takes up more space on the page.

Once the canvas is set up, Davin imports an image that he will use in his design. He positions the image using alignment tools, ensuring it's aligned to the left and top edges of the container, then sets the width to 100%. With Editor X’s responsive scaling feature, the image resizes proportionally.

Making the Header Stand Out

A well-designed header is essential for smooth navigation and user experience on any website. To ensure the header remains visible while scrolling, Davin selects it and sets the Scroll Effect to "Fixed Position". He also unchecks the "Overlap Contents" box so the header sits above the first section without any overlap.

Davin then adds a yellow version of his signature to the header—but not before resizing it and docking it to the top edge of the header for the best possible placement.

Crafting the Loading Screen Animation

Now that the homepage structure is in place, it’s time to build a captivating loading screen animation. Davin starts by creating a container that will house the loading animation, adding a background color, removing borders, and ensuring it covers the entire viewport.

To create the actual animation, Davin chooses to work with Lottie animations, a popular library for lightweight, scalable animations. He adds a Lottie animation element from the Add Panel, uploads a JSON file with the desired animation, and sets it to autoplay, loop, and stay in view by docking it to the center of the container.

He then creates a trigger that starts the loading animation once the page finishes loading, ensuring a seamless and engaging user experience.

Wrapping Up

With these steps, Davin Milan demonstrates how intuitive and powerful Editor X can be for creating dynamic and interactive websites. By focusing on responsive design, clean structure, and eye-catching animations, designers can make the most of their no-code design toolkit.