Javascript function call after interaction is done

Design help Custom code
1

Hey guys,

I actually can’t believe I haven’t found more here on this topic - I found quite some related stuff but nowhere a proper answer to a thing I believe a lot more people/user would be interested in. Maybe I just didn’t realize that I’m complicated and there is an easy way to accomplish what I want.

Is it possible to have a Webflow interaction trigger a javascript function somehow?

I give you an easy example. I have the a popup on the landingpage that is fading-in with an animation delay of 2 seconds. I’m in my example talking about a cookie overlay.

I obviously in that case can’t use something like jquery’s dom-ready event or even an onload event, as the overlay is not yet there on the page and visible! How on earth can I find out somewhere in my custom code if something like an element has been faded in and is now on the page or even trigger maybe a function afterwards.

I mean I could obviousoly do a setTimout function and wait 2 seconds maybe. Or even have a while loop run to test if the element is on the page or not - but none of these seem like good ways of doing something like that.

Thanks for your help and feedback.

ps.: I could name tons more of such examples where you would want to either have a callback from an interaction within webflow or the other way around also. Like if you implement a custom library that maybe interferes with the normal page refreshes, you then want to trigger webflow interactions and functions manually for instance.

1 Like
2

Any oder trick I didn’t get that would let me circumvent this “problem”?

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>
4

As @jasondark suggests, the best way is perhaps using a MutationObserver on a hidden element (#divToShow) that the interaction changes to display block after the 2 second fadeIn.

Here is how I would use it.

<script>
  const el = document.querySelector('#divToShow');

  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if(mutation.attributeName === 'style'){
        // do what you need here
        console.log("div has been shown");
      }
    });    
  });

  const observerConfig = {
    attributes: true, 
    attributeFilter: ["style"]
  };

  observer.observe(el, observerConfig);
</script>
5

Thanks guys. One more question though.

Imagine I’m using a custom page-transition or any kind of code that basically works with page-routing etc. In my case barba.js (https://barba.js.org/) … how would I trigger webflow animations and functionality after my custom code is executed? So basically the other way around as asked above?

E.g. in the navigation I have a w–current class aplied to highlight the currently active page-item. But this class is not applied if I mess with the page-routing with a custom javascript library.