How to bind webflow interactions to dynamic elements

Design help Custom code
1

Hi,

I am building a page using the typical Ordered List elements <ol><li></ol>. The first elements are static and were added via the Webflow Designer. They are followed by a few list items added dynamically using Javascript.

I created interactions for the “static” list items and expected them to work with the dynamically added items too. But it turns out they don’t. Even after making sure they use the exact same structure and classes.

My guess is that Webflow binds its interactions to existing elements on page load.

Is there a way to bind Webflow interactions to elements after the page has loaded?
Or is there a way to make webflow wait for my script to add elements before it runs its biding script?

Any help will be very much appreciated!

2

Replying to my own question here in case anyone finds it helpful.

Running the command:

Webflow.require('ix2').init();

It tells webflow to initialise or re-initialise the interactions. So it binds all elements on the page again. It works like a charm.

5 Likes
3

Nice solution @gvdias!

1 Like
4

Saved my life. Thank you so much!

5

It works wonderfully. However, I found that it also prevents “Scroll into view” animations to play when they are already visible on page. Which means you have to scroll manually in order to start them. Maybe you also know a special Webflow method to do that? How did you learn about the other one?

Anyway, these two lines of code (found here) do the job:

window.scrollBy(0, 1);
window.scrollBy(0, -1);
6

In fact, it also breaks animations that trigger on page load. Does anyone know the way to fire the “Page load” event?