Stagger works in Bricks/backend but not frontend

Bug Reports
1

I have a new site build and I’m adding my first animation to some hero text.
I created a class “.fuzzy-in” and set it on two elements in the hero banner.
Then I created the timeline for pageload, set the trigger to the class, and turned on handle triggers separately.

Then I adjusted the animation settings as I wanted, used stagger, and it works fine in the backend, previewing within Bricks.

Then I open the frontend and, nope, all elements animate at the same time, no stagger at all.

I have the setting for Bricks to set ID “as needed” disabled. My elements have the same IDs in the backend and front.

The site also uses ACSS and Frames, Litespeed cache (all cache and optimizations disabled for admin), Solid Security. Even so, I’ve disabled almost all plugins except forge and it still doesn’t work.

Sometimes even the backend stops wanting to show previews, and there are messages in the console like this:
builder.js?ver=1744766711:1 Uncaught TypeError: Cannot read properties of undefined (reading ‘pan’)
Or:
Attempting to save empty nodes array. Save operation aborted.

Sometimes when the animation IS previewing properly in the backend, it doesn’t grab all the characters. For example, element one has 16 characters and they animate. The 2nd element (a subheading) has 31 characters and it only animates the first 9 characters (when testing a character stagger instead of whole element stagger).

Bricks has a setting for disabling jQuery Migrate, I’ve tried with and without this setting enabled and neither changes it.

Sometimes as I’m troubleshooting and adding/removing the animation class on different elements, Forge doesn’t “keep up” and the animation timeline doesn’t grab the new/changed elements by the trigger and they won’t preview.

Something is clearly very off or buggy or there are conflicts or I don’t know what. I’ve wasted half a day just trying to add the world’s easiest animation and nothing wants to work right.
I have other unanaswered threads in this forum with more things like this that just don’t work right. I can’t seem to make even one high quality animation without a fight!
I’m just venting now, but seriously Forge just never works for me and it’s such a fight to get any animation functioning. I don’t know what the trick is.
Now with the new UX, all the documentation, screenshots, videos, are all outdated. Things aren’t named the same.
There aren’t enough examples and walkthroughs of how any feature even works, it’s hard to see these features how they are supposed to work.

I just want a functioning stagger, is that so hard! lol

2

Add another bug. The “target” selector for picking an element doesn’t work. It just has an endless spinning icon and it doesn’t make the actual selection of the element.

Another bug happens sometimes when I’m going back and forth between the animation timeline and the timeline settings (right sidebar), the content of the entire sidebar just disappears to a blank nothing.
I get more console errors:
TypeError: Cannot read properties of undefined (reading ‘startTime’)

And:

TypeError: Cannot read properties of undefined (reading ‘length’)

To refresh this, I switch to the node edit UX and then back to timeline.

And another oddity when the browser height changes, the animations restart and run again, even though I don’t have it set to repeat and I’m not refreshing the page. Just resizing the browser makes them run again. I assume this could be normal behavior but I don’t know. I don’t want it to rerun just because they change the window size.
Update: only the character stagger is repeating itself. I made another animation with a fade-in and that one doesn’t repeat.

3

Sometimes Forge loses its mind and can no longer “see” if there are elements with a certain selector.

It has this message “Your trigger selector does not seem to exist on this page or there are no animations on this timeline”

Well the class is definitely on the element, and shows on the frontend, and in the backend editor too. It’s not misspelled or anything. In fact, it just stops seeing any selectors at all.

More console log errors though:

SyntaxError: Failed to execute ‘querySelector’ on ‘Document’: ‘.’ is not a valid selector.

I’m not sure why it’s looking for just a dot. Inside the trigger selector box, you have to type a dot first in order to type your class, but it’s freaking out as soon as I type a period and takes focus away from the trigger selector box. So I click back into the selector box and finish typing the classname, but it doesn’t wake up out of not seeing the selector.

Once I get the correct trigger typed in the box, I click “Retry” on the timeline but it doesn’t find anything.

4

Have you figured it out? Was it really the bug, or was there something on the user side configuration? This is driving me nuts. I only just started using Bricksforge for the animations, and I am seeing some really weird issues. The absence of developer responses is disheartening (to me). I can not even see a timeline correctly.

I found this official Brickforge video posted more than 2 years ago, and in there, they had a much better GUI to work with. Version 3 is an abomination compared to that video.

https://www.youtube.com/watch?v=bfiUxd8_LVM

5

It is some kind of Javascript bug, nothing we can do.

I found the best method is to copy the select entirely, including the period, like “.my-selector” and then in the target selector box, paste it directly in.

Don’t try to type the select because as soon as you press the period, it will attempt to find the element and lose focus and lose its mind. Just paste in the whole selector at once. Don’t try to use the little target selector picker thing at all.

6

Hey! :slight_smile:

Stagger Problem

Regarding the Stagger problem: Which Stagger do you have used? We need to differentiate between two:

  • Stagger für Timelines, which delays the entire timeline (useful for “Handle Triggers separately”)
  • Stagger for Animations, which delays single animations inside the timeline

Have you used the right one for your use case? Timeline Staggers can be set in the Timeline settings, while Animation Staggers directly in the Animation settings.

Selector Picker not working

Strange – I was never able to reproduce this issue, but another user has reported this as well few days ago. Which browser are you using?

7

Thanks for checking.

I’m in Chrome.

Normally if I want to create animations based on a CSS class, I turn on the separate trigger handling because I don’t want all animations with that class happening in unison.

On the timeline, these are simple, I only have one timeline, and I would only turn on stagger when doing a character stagger.

I’m not sure how changing my stagger settings would fix anything, given that I see exactly what I want but only in the Bricks preview. It doesn’t work that way in the frontend. I’m sure it must be related to those console errors I posted.

8

If you see the correct animation in the backend, the setup might be correct. Can you confirm that the choosen selector really exists in the frontend? Can you check it via the console? Bricks adds some selectors only to the builder iframe, but not to the frontend.