Set the fadeInLeft entrance animation on a paragraph, also set a delay of 1000ms.
Result:
The problem comes from a combination of a CSS hotfix, located in our theme and a problem with Animate.css + the DROWL Paragraphs script to handle the animations.
To make all "fading entrance" animations work, we needed to set an opacity:0; to them. Otherwise, those Paragraphs would be directly visible, till the animation fires (hide => fadein).
.has-animation[data-animations*="\"animation\":\"fade"]:not(.in-scope){
opacity:0;
}
Without a delay, we have no problem, when the .in-scope class is added, our hotfix "disappear" (opacity:1) and the animation fires right in that moment, so opacity is getting 0 again .. then it fades in.
We should refactor this animation thing.. the settings are fine, but the script uses outdated techniques (switch to Intersection Observer) and we should address the fadeIn problem right in this module.
Maybe we only need to set the .in-scope class with the Intersection Observer (+ the hover animations option thing..) and add some CSS like:
.paragraph.has-animation:not(.in-scope){
animation-name: none !imporatnt;
}
This should fire the animation, once the .in-scope class is removed.
In addition, we need the animation delay as CSS variable on the paragraph wrapper, so we can simply add:
.paragraph.has-animation{
animation-delay: var(--paragraph-animation-delay, 0ms) !important;
}
Active
1.0
Code
@thomas.frobieter just found 📌 Switch to Intersection Observer API for scroll triggered animations Closed: duplicate which might be closed as duplicate then?
Moved this over to https://www.drupal.org/project/drowl_paragraphs_bs → for future implementation