Handling Webflow Animations with Wized: 2 Effective Solutions

The Problem

Webflow applies animations to elements in the DOM at page load. However, when Wized dynamically loads elements after the initial page load, these animations don't apply to the newly inserted elements. This can lead to a less engaging user experience.

In this article, I'll discuss two solutions to address this issue: resetting Webflow interactions using Webflow JavaScript API and using an external controller to manage the animation.

1. Resetting Webflow Interactions

The first approach is to reset all Webflow interactions using the Webflow JavaScript API. This method reinitializes all animations on the page.

Implementation

To reset Webflow interactions, you can use the following JavaScript code:

window.Webflow.destroy();
window.Webflow.ready();
window.Webflow.require('ix2')?.init();

for example, if we want to reset the webflow interactions after Wized has loaded a list of items we can do this

    window.Wized = window.Wized || [];
    window.Wized.push(Wized => {
        const listElement = Wized.elements.get("listItem");

        listElement.on('list', () => {
            window.Webflow.destroy();
            window.Webflow.ready();
            window.Webflow.require('ix2')?.init();
        })
    })

Considerations

• Global Reset: This method resets all animations on the page, not just the ones related to the dynamically loaded elements.
• Initial State Issues: Animations with initial states will also reset, which might lead to unwanted behaviors. For example, if you have a loader animation with an initial state set to visible, it will reappear after the reset, potentially disrupting the user experience.

2. Using an External Controller

A more controlled approach is to use an external controller to manage the animations. This involves attaching the animation to an element that is present in the DOM at page load and triggering it programmatically after Wized loads the dynamic content.

Implementation

Consider you have a button that triggers an animation. Here's how you can implement this:

1. Ensure the button and the animated element are present at page load.
2. Attach the Webflow animation to the button.
3. Use Wized to programmatically trigger the button click, thus starting the animation.

Here's an example:

Considerations

• Control and Flexibility: This approach gives you precise control over which animations to trigger without affecting others.
• Element Presence: Both the trigger element (e.g., the button) and the animated element must be present in the DOM at page load to ensure Webflow can attach the animations correctly.

Summary

In summary, when integrating Webflow animations with Wized, you have two primary solutions:

1. Resetting Webflow Interactions: This method resets all animations on the page but can lead to unwanted behaviors if not managed carefully.
2. Using an External Controller: This solution provides more control by triggering animations programmatically, ensuring that only the desired animations are affected.

Choosing the right approach depends on your specific use case. If you need a quick and broad reset, the first method might be suitable. However, if you require more granular control, using an external controller is likely the better choice.

By implementing these strategies, you can maintain a dynamic and engaging user experience on your Webflow-powered websites, even when using Wized to load content dynamically.