My animations are working in the backend but not in the front end. Does anyone have suggestions to get this working?
Hey @salsamology !
To get help, I think you’ll want to provide a link to the page your working on and a little more description of exactly what’s happening. It could be as simple as you didn’t click “Save” on the animation. Without a link to the live page and a detailed description of what’s happening, people have trouble assisting.
Speaking from experience, sometimes as you’re describing the issue, you figure out what you’re doing wrong and end up getting it solved all on your own. One of the benefits of being forced to provide a detailed description of what’s happening.
Hi @Revere ,
I appreciate your response on this matter. I tried animating two elements in a section. Just a Heading title and a description.
When I set the animation for the second element, they both run in the backend and only one runs in the front end.
Here is my url of the homepage https://www.4sightdesignz.com and a loom screen recording of what I did.
1 Like
Okay, I’m no expert here, but I notice that the text you’re trying to animate doesn’t seem to have an ID or a Class:
Notice that the H2 has an ID that your animation is being applied to, but there’s nothing like that on the
that you’re trying to animate.
Does that help?
In Bricks Forge it selects the IDs only and not the classes. Motion.Page allows you to select Classes.
I did the exact animation in Motion.Page and no problem. The settings are almost exact in both plugins. Brick Forge seems to be a little buggy.
I tried it on a clean local install and the same problem. This is a very simple straightforward animation. So I can’t understand why it does not want to work.
Maybe I would try a lower version of Bricks Forge and see if I get any issues.
You can type in class names manually. If your animations are not working on the frontend, the common reason is that you try to animate not existing selectors. Can you re-check that?
Hey @Daniele I checked and rechecked…I am even did a clean install on local. It started to seem like it was working. On one element I do a Translate, Opacity and a blur. That’s a hit-and-miss. If I go to the second element everything stops working. You say type in the element. This is at the ID level? Because I did choose the correct ID via the selector and copy it. Choosing a Class you created does not work at all. But that is no prob. It is feeling very buggy and unstable. I may be doing something wrong. I do the same in motion.page and no prob. I prefer bricksforge as It seems more natural. Can you create a video of the recommended way. I am at a lost here…any help is appreciated
Bricks has introduced a setting “Add element ID & class as needed”. With this setting activated, it is possible that some IDs or classes are existing in the backend, but not in the frontend. (Related to this: Bricksforge Panel – Bricksforge Docs)
So even using the picker, its possible that your selector does not exist in the frontend. You always need to make sure to use safe selectors, for example creating a custom css class (or global class) which you can use as selector in the panel.
Otherwise, if its still not working for you, feel free to send me access to your site. I’ll take a look where the issue is 
@salsamology Hey again! Thanks for access! Just tried it – it works perfectly using the Bricksforge Panel. The hero animation runs with Bricksforge now: https://www.4sightdesignz.com/
I have only roughly created them. There may therefore be deviations.
But I think I figured out what the real problem is. I noticed that your page will be cached even for logged in user. Therefore, you may not see new changes directly. I had to click “Purge All” on Lightspeed Cache settings after each change. Could this be the reason?
1 Like
No i re tested my local install with the following option switched off…i switch off the "Add element ID & class as needed” and i was able to do a complete animation without any hiccup.
I am not completely sure if switching this off is recommend. Then again we shouldn’t have to do this correct?
Please advise. As for the test you did i tested it with the caching plugin off. Also tested it on local with only Bricksforge and Automatic CSS no other plugins and had issues.
Hope this helps. Please advise on the settings.
Sheldon
With the example I’ve created for you, you can re-enable “Add element IDs and classes as needed”, because I’m using your custom global classes as selectors, and those classes are definitely included in the frontend. I cannot find issues here. Everything works as expected.
1 Like