How to show page after animation complete with Lottie and Javascript

Using Lottie and JavaScript to display pages after animation completion can be achieved through the following steps:

1. Integrate the Lottie Library

First, integrate the Lottie library into your project. You can do this via CDN or by downloading the library files locally:

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.4/lottie.min.js"></script>

2. Prepare the Animation File

Before using Lottie, ensure you have an animation file. This file is typically in JSON format and can be exported using Adobe After Effects with the Bodymovin plugin. Place the exported JSON animation file into your project.

3. Create HTML and CSS Layout

In HTML, create containers for the Lottie animation and the subsequent page content:

html
<div id="animationContainer"></div>
<div id="content" style="display:none;">
    <!-- Page content -->
    <p>Welcome to the main page!</p>
</div>

4. Use JavaScript to Load and Control the Animation

In JavaScript, utilize the Lottie API to load and control the animation. Configure the animation to display the main content after it completes:

javascript
var animation = lottie.loadAnimation({
    container: document.getElementById('animationContainer'), // DOM element for the animation container
    renderer: 'svg',
    loop: false,
    autoplay: true,
    path: 'path/to/your/animation.json' // Path to the JSON file
});

// Listen for animation completion event
animation.addEventListener('complete', function() {
    document.getElementById('content').style.display = 'block'; // Display page content after animation completion
});

5. Test and Adjust

After completing the above steps, thoroughly test the entire workflow to ensure the animation plays smoothly across various devices and browsers, and that the page content is correctly displayed after the animation completes.

Real-World Example

In a previous project, we utilized Lottie to create a loading animation for the welcome screen. The animation included a simple welcome message and dynamic logo effects. With a duration of approximately 3 seconds, the main page was gradually revealed after the animation completed. By implementing this method, we successfully increased user acceptance of website loading wait times and improved the overall user experience.

By employing this method, Lottie and JavaScript not only enhance the visual appeal of the page but also deliver a smooth user transition experience without compromising performance.