webflow custom event help

[01998786427]

hello 

thanks to webflow the gsap is now free and webflow has introduced  new ui for gsap animation . but on this interaction panel i dont understand this custom event interaction . i tried searching for this but it seemed there isnt much info aout it . i also didn't under the library people kept talking to see . and i dont know coding but know webflow very well . so in this case can you-

 

-with an example tell me how to use custom event 

-provide me the library people kept taking about

[Rodrigo]

Hi,

 

I'm far from being a Webflow expert, but for what I can tell is about events that are not listed in this list

So for example that list covers click, mouse enter/leave (Hover), page load and scroll, which are the most common user interactions that could trigger an animation. Let's say you want to trigger an animation when the browser is resized, that is not in the panel so you can use a Custom event. So in this case you select the trigger element and then go to the interactions panel, give the event a name add the actions and work them in the timeline until it works the way you want:

In this case I'm fading everything out and then in on the resize event. Then in the page's custom code section add the snippet you can copy from :

const wfIx = Webflow.require("ix3")

window.addEventListener("resize", () => {
  wfIx.emit("window resize");
});

So when you resize the window the animation should play as expected. Here is a simple demo that has a hover (mouse enter/leave) on the box and the resize event as well:

https://ix3-test-cfe332.webflow.io/

 

Here is the preview link:

https://preview.webflow.com/preview/ix3-test-cfe332?utm_medium=preview_link&utm_source=designer&utm_content=ix3-test-cfe332&preview=d912edbcac66e3e4fa8bd7b6ccf96ca2&workflow=preview

 

Hopefully this helps

Happy Tweening!