This feature is in AnimateGL Pro. See AnimateGL Pro.
Site-wide rules animate every block of a type, or every element that matches a CSS selector, without editing each one.
Add a rule
- Open the AnimateGL page and click the Site-wide rules tab.
- Click Add rule.
- In Animate, pick Block type or CSS selector.
- Enter the block type, for example
core/image, or a selector, for example.entry-content h2. - Pick an Animation, and optionally a Duration (ms) and Delay (ms).
- Click Save rules.
You can add up to 50 rules. A selector that isn’t valid CSS isn’t saved, and the tab tells you which one.
How rules apply
- Block type rules apply to static and dynamic blocks.
- Selector rules apply to any element on the page that matches, also outside blocks.
- Blocks and elements with their own animation keep it.
Leave a block out
Select the block, open the Site-wide rules group in the AnimateGL panel, and turn on Don’t apply site-wide rules. The rules then leave this block and its inner blocks without animation. The group shows on blocks without an animation. Blocks with an animation skip the rules anyway.
In your own HTML, add the class agl-no-rules to an element to leave it and the elements inside it out.
When Pro is off
If Pro features are off on the site, elements that a selector rule would animate are shown as they are.