- Issue created by @w01f
- 🇵🇱Poland mahyarss
Thank you for reporting this issue. I’ve tested the AnimateCSS On Scroll module on a fresh Drupal installation using the default Olivero theme, and the images were correctly hidden initially before the fadeInUp animation triggered as expected. This suggests that the module is functioning properly in a standard setup.
The issue you’re experiencing might be related to the theme or custom CSS in your setup. For instance, CSS rules like:img { display: block; }
or even the use of
!important
could interfere with the Animate.css library, preventing the initial hiding of elements before the AOS animation kicks in.Suggested Steps to Troubleshoot:
- In the animation configuration form provided by the module, please try enabling the following options one at a time:
- Clean previous classes: This ensures that any conflicting CSS classes are removed before applying the animation.
- Fix Display: This option adjusts the display property to ensure compatibility with AOS and Animate.css.
- After enabling each option, clear the Drupal cache to ensure the changes take effect.
- Test the animation again and observe if the issue persists.
Could you please try these steps and share the results? Additionally, it would be helpful if you could provide:
- Details about the theme you’re using.
- Any custom CSS or JavaScript that might affect the images or AOS animations.
- Whether this issue occurs with other animations or anchor placement settings.
Looking forward to your feedback to help narrow down the cause and find a solution!
- In the animation configuration form provided by the module, please try enabling the following options one at a time:
- 🇺🇸United States w01f
I've tested this on two migrated 11 sites, inspecting for loose rules on the elements and enabling each option individually and then together, always clearing cache. I did have a block on child images, but removing it didn't fix the issue.
I tested on both Olivero and Claro, and the issue is present for both of the core themes.
- 🇵🇱Poland mahyarss
Thank you for your thorough testing and detailed feedback. Since no one has reported this issue with AnimateCSS On Scroll before, it’s likely related to a specific configuration in your environment.
To narrow down the cause, please:- Test on a fresh Drupal 11 install with only this module and a core theme (e.g., Claro), without additional modules or custom settings. Check if fadeInUp with Top bottom anchor placement works as expected.
- Before scrolling, inspect the element: share a screenshot of the Styles tab (looking for
opacity: 1
,visibility: visible
, or!important
) and any Console JavaScript errors. - Confirm whether you’ve altered the AOS.js version via the AOS JS UI module (e.g., switching from AOS 3 to AOS 2). If so, please test with both versions to see if it makes a difference.
- Verify AOS settings in the module’s form are correct.
Please share:
- Results of the fresh install test.
- Styles tab screenshot and console errors.
- Details of any customizations, additional modules, or changes to the AOS.js version.
If the fresh install resolves the issue, consider taking a backup of your site and disabling other modules one by one to identify potential conflicts. With your expertise, I’m confident we can resolve this quickly, and I’d be thrilled to help you get this sorted. Looking forward to your update!