BricksForge Events: expose much more events than Bricks will ever do…


  • dragstart - The drag operation is started
  • drag - The drag operation is in progress
  • dragenter - An element is dragged into a valid drop target
  • dragleave - An element is dragged out of a valid drop target
  • dragover - An element is dragged over a valid drop target
  • drop - An element is dropped on a valid drop target
  • dragend - The drag operation is finished

keyboard events ( KeyboardEvent )

  • keydown - A key is pressed down
  • keypress - A key is pressed down and that key normally produces a character value (useful for keyboard shortcuts)
  • keyup - A key is released

Form events

  • submit - A submit button is clicked

mouse events ( MouseEvent )

  • mousedown - A mouse button is pressed down
  • mouseup - A mouse button is released
  • click - A mouse button is pressed and released on the same element
  • dblclick - A mouse button is clicked twice on the same element
  • mouseover - A pointing device is moved onto the element that has the listener attached
  • mousewheel - A mouse wheel is rolled up or down over an element
  • mouseout - A pointing device is moved off the element that has the listener attached
  • mousemove - A pointing device is moved while it is over an element

touch events ( TouchEvent )

  • touchstart - A touch point is placed on the touch surface
  • touchmove - A touch point is moved along the touch surface
  • touchend - A touch point is removed from the touch surface
  • touchcancel - A touch point has been disrupted in an implementation-specific manners (too many touch points for example)

form events:

  • change - The value of an element changes
  • input - The value of an element changes or the content of an element with the attribute contenteditable is modified
  • beforeinput - A key, mouse button, or pen is pressed on an editable element or a touch is released on an editable element
  • focusin - An element is about to receive focus
  • focusout - An element is about to lose focus

CSS animations events

  • animationstart - The animation has started
  • animationiteration - The animation has repeated
  • animationend - The animation has finished
  • animationcancel - The animation has been cancelled

CSS transitions events

  • transitionstart - The transition has started
  • transitionrun - The transition is running
  • transitionend - The transition has finished
  • transitioncancel - The transition has been cancelled

Pointer events

  • pointerdown - A pointer becomes active
  • pointerup - A pointer becomes inactive
  • pointerover - A pointer is moved onto an element
  • pointerout - A pointer is moved off an element
  • pointermove - A pointer changes coordinates
  • pointerenter - A pointer is moved onto an element or one of its descendants
  • pointerleave - A pointer is moved off an element or one of its descendants
  • pointercancel - A pointer will no longer generate events

Window events ( WindowEvent )

  • resize - The document view (window) has been resized
  • focus - The document view (window) has received focus
  • blur - The document view (window) has lost focus
  • beforeprint - The beforeprint event is fired before the associated document starts printing or before the print dialogue box is displayed
  • afterprint - The afterprint event is fired after the associated document has started printing or after the print dialogue box has been closed
  • error - An error occurs while running a script
  • storage - A storage area (localStorage or sessionStorage) has changed
  • online - The browser has gained access to the network (but particular websites might be unreachable)
  • offline - The browser has lost access to the network
  • hashchange - The fragment identifier of the URL has changed (the part of the URL after the #)
  • popstate - The active history entry has changed
  • message - A message is received through the event source
  • wheel - A wheel button of a pointing device is rotated in any direction

Document events ( DocumentEvent )

  • visibilitychange - The content of a tab has become visible or has been hidden
  • scroll - An element’s scrollbar is being scrolled
  • fullscreenchange - An element was turned to fullscreen mode or back to normal mode

Intersection Observer

Expose the configuration object like the animation object. Add dropdown with some example settings/templates changing the configuration object.

  • intersection - The intersection ratio of the target element with an ancestor element or with a top-level document’s viewport has changed
  • intersectionobserver - The observer’s callback was invoked

Mutation Observer

Expose the configuration object like the animation object. Add dropdown with some example settings/templates changing the configuration object.

  • mutation - A DOM mutation has occurred in the observed node or one of its descendants (each mutation)
  • mutationobserver - The observer’s callback was invoked (mutation in general)

Bricks specific events

Some sidenotes:

To not overload the add events dropdown sort them by alphabet but add a top section of often used

Add an checkbox if events should bubble (and be passive)

To enable better interaction expose the event object to JS fields (animation object etc.)

     x: event.clientY

Thoughts? Would make the Events panel have an USP in the sense of BricksForge. Many more events then Bricks will deliver and control over the UI.


First, I want to say thank you to @MaxZieb because you’re taking the time to think and share what can be nice for Bricksforge, and this is something that all users we will take advantage (even those ones like me that have 0.001% of knowledge than you have).

Second, thank you to @Daniele to listen to us and do all the hard/dirty work.

And now my opinion about the topic…

Having something like that will put back a good reason to have interactions in Bricksforge. (I’m just thinking how funny can be to have interactions with the keyboard in certain website :grinning:)

Even in terms of “marketing” you can use it like “bricks interactions on steroids” (this is only a concept).

And this is following pretty well the line that Bricksforge it’s having. I mean, Bricksforge it’s a plugin to expand possibilities.

Happy day!


Thank you for your kind word. Much appreciated.

I agree, and additionally if ever the panel would become builder independent it has its events already onboard.

1 Like

Whoop! I like this a lot!
I was sad to see the potential that BF interactions disappear, but was unable to express exactly why, but this list is pretty much a comprehensive reason for them to stay :slight_smile:
I don’t think this level of interaction will be opened to the native builder.

1 Like

The event list above was mainly based on what the browser anyways offers (raw DOM events, compelling and nice). Also, above are some suggestions for Bricks specific JavaScript events for Slider sync and potential events covering built in elements.

But, wait there is even one more potential source for events (depended on GSAP being loaded, though). If it is loaded, there is this wide range of observers it offers… so even more events one could offer in the events panel!


  • Rich callback system including onDown, onUp, onLeft, onRight, onDrag, onDragStart, onDragEnd, onHover, onHoverEnd, onToggleY, onToggleX, onChangeX, onChangeY, onChange, onClick, onPress, onRelease, onMove, onWheel, and onStop
  • Debounced by default for maximum performance (you can set debounce: false if you prefer)
  • Cross-browser compatible - automatically senses if TouchEvents, PointerEvents, or MouseEvents should be used.
  • Automatically prioritizes the event with the largest delta (like if a wheel and scroll and touch event all occur during the same debounced period)
  • Ignore certain elements, like ignore: ".deadzone"
  • Get velocity (on x and y axis separately) as well as the clientX and clientY coordinates (for touch/pointer events)
  • Set a minimum threshold for dragging. For example, dragMinimum: 5 would only fire the onDragStart/onDrag/onDragEnd callbacks if the user moved 5 pixels or more.
  • Set a tolerance so that the movement-related callbacks only fire when a minimum delta is reached, so tolerance: 50 would wait until there has been a change of at least 50 pixels, and then once that’s reached it starts over.
  • Set a wheelSpeed multiplier if you’d like to tweak the wheel-related deltas (speed them up or slow them down).
  • Integrated with GSAP and ScrollTrigger
  • Roughly 3.5kb gzipped

Sidenote for people concerned with performance: The neat thing is that all the suggested events are basically built into the browser, Bricks or GSAP and BricksForge would only need to “write” the trigger/glue code to make them work based on your specifications in the panel. Hence, it should be very little code that is generated on a per-page basis and no interpretation or “runtime” is needed to make it work that is not anyway already present.

1 Like

Woaaaah! Great Input! I’m already working on implementations. And: to make the UI more clear for a big list of events / options, I’ve created a grouped select for a better overview. This will be exists for events, but for actions as well:

Also, and this is offtopic, you will be able to open a code editor to have more fun on writing custom code:

Thaaanks, Max! And thank you all for your amazing input!


You are welcome, and I am just loving this product and … you are absolutely killing it!
I’ll be testing the hell out of this as soon as it hits our downloads.

Thank you!

Just brainstorming a bit… not sure about the buttons and colors, though.

Bottom half is a little variable/API lookup. It educated the user with a brief explanation and has links to the official manuals (little icon). It is populated by area differently. Showing variables that are accessible in any given context. Top title describes what the code is for. Window can be dragged and resized, and bottom viewer can be resized inside the modal as well. May rather us abort then close. Double-clicking on a work in the left lower viewer inserts the command into the code editor (inspired by Hype). Under the example text event (object) we can see a table, but it could be anything (text, code examples etc.).

Here is a version with a collapsed help viewer (only brainstorming here):


Wait a minute, I am currently on the road, but was thinking about the screenshot. I posted earlier on the left bottom part there should be the target object and underneath all the keys and each key gets a description with a link to the official documentation the same was should be done for other objects like event, I will correct the screenshot when I am back home. This should help newcomers learn and using the double click below even for seasoned programmers to insert objects that are available really really quick. Combine this with auto complete and it’s a killer feature.

Food for thought: The below viewer could be built from the same lookup as the autocomplete, reducing redundancy when creating and preparing the docs even further.


All the above would be very useful for me!
I’m making decent progress with my development skills, but I’ve never collaborated or finished a proper course, and generally like to just fiddle with stuff. Visual representations and examples built into this would be a huge help with that, Max :slight_smile:

Daniele, the Ui is looking fantastic. I think you’ve massively improved upon the Bricks design system, and so far nothing has felt disorganised, or in need of guesswork.

1 Like


Having conditions on events was introduced by Brick interactions, and I think it would make much sense to keep inline with that idea. There are the simple statement-based conditions, that would probally be rendered into an event scope: random example from a user: window.a == window.b
This returns true or false and will probably be part of the event callback and abort it if not true.

There are also events based on gsap.matchMedia and they use media query string… so that would be another great source for event conditions. These run the content and even have the ability to revert animations if not meet. Pretty powerful stuff if implemented correctly.

Even more events: Callback events!

There is a whole slew of further events. These are in a way special as they are mostly dependent on a prior action. Hence, in the case of timelines, they are consequences. For example, they can fire if a timeline starts and ends or progress. The can fire as the consequence of load an image or another action. Given the current interface it would be nice to have them also in the events panel. Hence, you create an new event “GSAP Timeline ends” and pick an existing timeline by name. But what happens if the timeline is deleted? You would need to unhook, disable or garbage collect if the item (like the timeline) they depend on is removed. “Unhooking” would be maybe a solution and rendered them inactive, but retain your settings.

Putting them inside the item and actions, on the other hand, would introduce a nested layer of complexity, but place them where they logically belong. It is an interesting problem to solve from a UI perspective.

Anybody have a solution or thoughts on this? I am just brainstorming here as it’s fun AND the callbacks events is another great source for events.

1 Like

Really looking forward to the events… combined with GSAP you should in theory be able to todo something like this hover effect.

HTML structure:

  • Add text per row (query loop should also work)
  • Add image per row (query loop should also work) and set it to absolute and opacity 0

Only 3 events and animations on text

  • Mouse Hover: fade the image in
  • Mouse Out: fade the image out
  • Mouse Move: position image where your mouse is plus an offset (gsap.quickSetter)
1 Like


I don’t know if you have the time or inclination, but I think you’d make an absolute killing with courses.
Your posts here have (for me, at least) touched on complexities that I usually tend to put into the “let’s learn/investigate this later, but never really” bucket. But you’ve explained many of them well enough that I feel emboldened to try.

It’s clear you’re enthused by Bricksforge’s possibilities, so perhaps an enrollable course on the more complex stuff using Bricks and its Forge would provide some sort of recompense for your time.

It seems like a win-win-win for Bricksforge, you, and the people Bricksforge seems to be aimed at.


0.9.4 will include many of the mentioned events, including MutationObserver and ResizeObserver. Also I’ll introduce a conditional logic system for your event actions, with the additional possibility to create really custom conditions for more complex stuff:


Wow this enables all sort of things including JavaBased container queries. Adding and removing a class based on container width etc.

Mutations are also so powerful :kissing_heart:


As addition, you will have access to different variables for your custom code input in almost all places :slight_smile:

That makes something like this sooo easy: