Streaming live at 10am (PST)

Implementing PixiJS Filters — Custom Javascript Code (Inside: Webflow Designer)

Hi Everyone,
It’s my first time on here, but I have been using Webflow for a while now.
I am very familiar with Webflow as a visual builder, obviously, but whenever custom code (especially javascript) becomes involved in one of my projects, I require almost a step-by-step guide to get anything to work (hence, my lack of code/language knowledge). Let’s say I had an image (with a unique class) inside a div block (with a unique class). What is the best way to integrate these PixiJS filters into my Webflow project so that I can use different filters (within PixiJS) on different elements/classes inside the Webflow Designer?

https://filters.pixijs.download/main/demo/index.html


I saw some users on here suggesting that I link to the “dist” hosted file similar to this:

In the "Before </body> tag"
<script src="https://cdn.jsdelivr.net/npm/pixi.js@6.0.3/dist/browser/pixi.min.js"></script>

NOTE: I’m not sure if the above “script src” URL is correct for my use-case…

I don’t NEED to be able to preview it inside of the Designer; I understand this may be one of the limitations here. Basically, I am lost in terms of where to input code, and how I would affect different elements/classes without duplicating code unnecessarily. If there are multiple solutions to this, I would love to know from someone more versed in Javascript to highlight the “optimal” or, if not that, easiest solution to implement.


Since this is more of a learning-based & ambiguous question, I do not have a specific read-only link. Anything will work if it points me in the direction of successfully implementing the renderer. Once I have something to play around with, I would imagine it is much easier to work with, conceptually. If more clarity is needed, I’ll be happy to respond (although I doubt I can add much in terms of syntax).

Webflow Forums have helped me through so much already and I’m super appreciative!
Thank you guys!
MATT

hi @matt.pen and welcome. There is several topics about pixi here on forum. Implementing and using this library can be a bit overwhelming if you do not code. I have find one that may give you more insides how to start.