Animations
Animations are available for on-going development, but not fully available on production yet
Animations fields are showing at block level only in Buzz, not yet in Galaxy 2.0 (new Andromeda design)
Once an animation has been added to a theme, even if you remove it from the theme, it will still be visible in the backoffice. It will not affect the local website, this is a "backoffice only" issue
The goal of this feature is to allow users to override animations variables from the theme at different levels:
Website level - The values of the variables are first defined at theme-level, but it is possible to override those values for all pages and blocks of a website (= at website level).
Block level - On the block level, it is possible to override the values defined at website level: Either the settings can follow-up the settings at website levels, or can be override.
Animations in BO - Website level
A new sub section appears in ‘Design’ section to list all the animation of the website, coming directly from the theme.
The list of animations at website level shows:
Name of animation
Content of the animation: this is an overview of the settings of the animation at website level
Theme Value: these are the values as they appear at theme level
Source of the animation
To edit the values of an animation, user can click in the list on the animation that needs to be edited.
It will enter the item and will show the different parameters of the animation:
By default, the values are the same as the values at theme level, the user can directly edit them.
Note that editing the values at website level will modify the values on each block that follows the values at website level.
Animations in BO - Block level
The sections for animations appears below the block settings, inside the block on which can apply the animations:
Custom animations switch disable
When adding the block containing the animations, the toggle ‘Custom animations’ is disabled. All the settings of the animation takes their values from the ones defined at website level, they follow up the settings of the website.
Custom animations switch enable
If the switch is enabled, the fields for all the settings of the animation appear.
If the user modify the values here, the modification will only apply to this block.
If the user want the block to follow the global settings at website level again, he can disable the switch.
Inside Testeur, the developer can define new “objects", this is what we use for animations
Inside my HTML
Variables are defined in this format #$object|category-key.variable-key$#
Here is an example:
reveal-animation-initial-opacity: #$object|block-reveal.initial-opacity$#
reveal-animation-initial-scale: #$object|block-reveal.initial-scale$#
<div class="{if=" '#$object|block-reveal.activated$#' "}my-css-class{/if}">
my content
</div>When writing the final HTML, Galaxy will try to get the configuration at block level if it exists
If not available, it will get the website configuration
If not available, it will get the default values
Setup in Testeur
In the list of pages, at the bottom is a link "List Objects"
This will allow you to edit each animations.
For each animation, make sure to select "Animation" in "Category" field
Access my variable from CSS?
Need to be defined in 2 parts
Inside my CSS I can create a CSS property with any name I want
.card {
transition-duration: var(--card-transition-duration);
}Inside my HTML
<!-- for example add code to header / footer -->
<style>
:root {
--card-transition-duration: #$object|card_hover.duration$#;
}
</style>
<!-- ---------------------------------- -->
<!-- inside my block -->
<div id="id-[[id]]"><!-- my block code --></div>
<style>
#id-[[id]] {
--card-transition-duration: #$object|card_hover.duration$#;
}
</style>
<!-- This will write -->
<style>
#id-random123blockId34 {
--card-transition-duration: 300ms;
}
</style>Access my variable from JS
Last updated