I want to use animations in some popups, but they are play once animations so I do not want them to begin until the popup is triggered and displays on screen. However, there isn’t a native Bricks option to do so that I’m aware of. Seems like most animations are by default triggering on Enter viewport and that is called immediately after Content loaded for the popup since technically the popup is in view, it is just hidden until triggered. Am I missing something?
can you show your setup and show on video how it plays early ?
enter viewport is way to go normaly weird.
Debug page here: Debug Page | Kevin T. Real Estate. You can see that the animation has finished before the popup displays.
Page is just a section + container + heading. Popup template (attached) is just a section + container + heading. Popup heading animation details:
Trigger: Enter viewport
Action: Start animation
Animation: flash
animation duration: 1s
Animation delay: 0s
No interaction conditions
Popup template settings > Interaction:
Trigger: Content Loaded
Delay: 3s
Action: Show element
Target: Self
conflict
setup your interactions ones not twice
The first interaction is the flash animation for the popup heading element. The second interaction is the trigger to show the popup. They are on and targeting different elements. Or are you talking about something else?
it seems like there is conflict to me
remove one of the interactions completely see if it is working fine
build it step by step you will see if there is any conflict or not
@sinanisler not sure we’re on the same page…if I remove the animation on the heading element in the popup of course I am not going to have issues animating in a popup. Because there will no longer be any animations in the popup 
Popup template export if you want to play with it:
{"id":5493,"name":"test-popup","title":"Test Popup","date":"2025-02-03 10:59:40","date_formatted":"February 3, 2025","author":{"name":"tydlackarealestate","avatar":"https:\/\/secure.gravatar.com\/avatar\/52da86e8da6e29c4c003954781bd0346?s=60&d=mm&r=g","url":"http:\/\/kevintrealestate.wordpress.com"},"permalink":"https:\/\/kevintrealestate.com\/template\/test-popup\/","thumbnail":null,"bundles":[],"tags":[],"type":"popup","content":[{"id":"cfgavw","name":"section","parent":0,"children":["fqdhfj"],"settings":[]},{"id":"fqdhfj","name":"container","parent":"cfgavw","children":["hjqwpu"],"settings":{"_direction":"row","_justifyContent":"center"}},{"id":"hjqwpu","name":"heading","parent":"fqdhfj","children":[],"settings":{"text":"I am a flashing animated heading","_interactions":[{"id":"xwryxp","trigger":"enterView","action":"startAnimation","animationType":"flash"}]}}],"templateType":"popup","templateSettings":{"template_interactions":[{"id":"tzxhss","trigger":"contentLoaded","delay":"3s","action":"show"}]}}
1 Like