Javascript function call after interaction is done

Design help Custom code
3

Unfortunately Webflow doesn’t provide any hooks into page events. So your only option is to hack together a custom solution. Couple of ways you might be able to achieve what you need:

  1. Attach a MutationObserver to the pop up. When its CSS properties change, check to see if its opacity is 1 (or any other property that would mean the animation has completed). Run your function after this.

  2. Set your animation trigger to be on click of a div that you create in Webflow. Now hide this div and give it an ID so you can reference it. Then put something like this in your page’s body code, this will spoof a click on the trigger div, run the animation, so that you can wait for your animation’s duration and carry on:

Example:

<script>
    const trigger = document.getElementById('trigger-div');
    trigger.click();
    setTimeout(() => {
        // Animation should have finished now
    }, 2000);
</script>