Need lottie animation to start once it is visibile

Design help Animations & Interactions
1

So I want to have a lottie animation start when I successfully submit a form however the lottie automatically plays when I try the “Scroll into view lottie playback.” So my next solution to this is to make it so when the button presses submit, the lottie will start to animate. OR I can press the submit button and then the lottie will become visible and then start to play. Any way to code that in custom code?

Here is my public share link: LINK
(how to access public share link)

2

Nevermind found the solution using this Lottie success icon - On form submit - Webflow Interactions tutorial - YouTube

3

If you’re interested in a solution that works “when visible” instead of relying on a timeout, you can try the intersection observer api.

This has been reliable for me so feel free to reach out if you need any help.

NOTE: This still requires setting up the click interaction in Webflow, just make sure the lottie element is a child of the click element.

const formSuccessIcons = document.querySelectorAll('.form__success__icon');
if (formSuccessIcons.length > 0) {
    formSuccessIcons.forEach(formSuccessIcon => {
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.click();
                    observer.unobserve(entry.target);
                }
            });
        });
        observer.observe(formSuccessIcon);
    });
}

Below is the same code with comments:

// Select all elements with the class .form__success__icon
const formSuccessIcons = document.querySelectorAll('.form__success__icon');

// Check if any .form__success__icon elements exist on the page
if (formSuccessIcons.length > 0) {
    // Loop through each element in the formSuccessIcons NodeList
    formSuccessIcons.forEach(formSuccessIcon => {
        // Create a new Intersection Observer for each .form__success__icon element
        const observer = new IntersectionObserver((entries, observer) => {
            // Iterate over each entry (each observed element)
            entries.forEach(entry => {
                // Check if the current entry (element) is intersecting with the viewport
                if (entry.isIntersecting) {
                    // Trigger a click event on the intersecting element
                    entry.target.click();
                    // Unobserve the current element after the click to prevent it from triggering again
                    observer.unobserve(entry.target);
                }
            });
        });
        // Start observing the current .form__success__icon element
        observer.observe(formSuccessIcon);
    });
}