Problem/Motivation

It would've been nice to have options to change duration of animation. All animations at the moment plays with one speed, duration is not configurable. But we want to set different animation duration sometimes to reach better visual effect.
aos.js library easily support changing of animation duration by adding data-aos-duration data attribute. But there is no way to configure animation duration in the Bootstrap Styles module.

Thank you in advance.

(P.S. Please tell if i'm wrong and this is possible somehow at the moment)

Issue fork bootstrap_styles-3259093

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

MintLucky created an issue.

flyke’s picture

flyke commented

I see that if you select an animation, it will use the option value as value which will be added to the 'data-aos' attribute.

In the code there is nothing that allows for a data-aos-duration attribute.
bootstrap_styles/src/Plugin/BootstrapStyles/Style/ScrollEffects.php:

if ($theme_wrapper && isset($build['#theme_wrappers'][$theme_wrapper])) {
      if (isset($attribute_type) && $attribute_type === (bool)1) {
        // Output some sort of data attribute.
        $build['#theme_wrappers'][$theme_wrapper]['#attributes'][$data_key][] = $storage['scroll_effects']['class'];
      }
      else {
        // Output classes.
        $build['#theme_wrappers'][$theme_wrapper]['#attributes']['class'][] = $storage['scroll_effects']['class'];
      }
    }
    else {
      if (isset($attribute_type) && $attribute_type === (bool)1) {
        // Output some sort of data attribute.
        $build['#attributes'][$data_key][] = $storage['scroll_effects']['class'];
      }
      else {
        // Output classes.
        $build['#attributes']['class'][] = $storage['scroll_effects']['class'];
      }
    }

I see that when editing a section, there is a Settings tab where you can add attributes (YAML) for the Container, Row and Column.
There you could add data-aos-duration: 900 for example.

But I am trying to figure out myself how to add the data attribute element via code.
I was able to alter the Animation settings (where you select the desired animation) and add a 'Animation duration' number input field via a custom mymodule_form_layout_builder_update_block_alter, with a default value of 400. I can edit and save my custom value there thanks to a custom submit handler I added, but still figuring out how to use that value in my custom submit handler to actually set it as data attribute on the correct element.

mariosr made their first commit to this issue’s fork.

mariosr opened merge request !43