Conflict with Bootstrap 5 & Animate on Scroll

Resolved jenwhitedesign
(@jenwhitedesign)

2 years, 5 months ago

Hello, I’m not sure a “fix” is possible, but I’m curious if anyone else has run into this or a similar issue. I searched the topics but didn’t see anything.

I have a WordPress website that is built using Bootstrap 5 and the Animate on Scroll library. Everything was working fine until activated the “Combine JS” feature. Nothing using the AOS library loads anymore, leaving me with a website with a bunch of empty sections.

I have several other websites using a similar combination with the exception of Bootstrap 4 vs 5, and they all work with this setting activated.

If you view the dev site I linked, you can see there are a few console errors. I don’t know enough about js to know how or if it’s possible to fix this issue, but I’m curious if others have thoughts?

The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Author Emre Vona
(@emrevona)

2 years, 5 months ago

may you share a screenshot of the error appearing in the console?

Thread Starter jenwhitedesign
(@jenwhitedesign)

2 years, 5 months ago

The error and the associated details are too long to capture in a screenshot. The error is below. If you go to the dev url I provided in the original details, you can see the error as well as click on each piece to view additional details.

Uncaught TypeError: document.querySelector(…) is null
A https://dev.ictbloktoberfest.com/wp-content/cache/wpfc-minified/7m22x9a2/hj93w.js:16
https://dev.ictbloktoberfest.com/wp-content/cache/wpfc-minified/7m22x9a2/hj93w.js:20
https://dev.ictbloktoberfest.com/wp-content/cache/wpfc-minified/7m22x9a2/hj93w.js:39
hj93w.js:16:1599
A https://dev.ictbloktoberfest.com/wp-content/cache/wpfc-minified/7m22x9a2/hj93w.js:16
https://dev.ictbloktoberfest.com/wp-content/cache/wpfc-minified/7m22x9a2/hj93w.js:20
https://dev.ictbloktoberfest.com/wp-content/cache/wpfc-minified/7m22x9a2/hj93w.js:39

Plugin Author Emre Vona
(@emrevona)

2 years, 5 months ago

can you exclude the aos.js source and clear all cache with minified sources please?

Thread Starter jenwhitedesign
(@jenwhitedesign)

2 years, 4 months ago

Done. The site is of course loading now, but now doesn’t use AOS, which is a requirement.

Plugin Author Emre Vona
(@emrevona)

2 years, 4 months ago

what do you mean?

Thread Starter jenwhitedesign
(@jenwhitedesign)

2 years, 4 months ago

The original post states that when WP Fastest Cache is used with Bootstrap 5 AND Animate on Scroll, and “Combine JS” is active within the WP Fastest Cache settings, the website will not load anything that is setup to use AOS animations. There are console errors. So per your request, I removed AOS and the site loads. But that doesn’t answer my question which was if there is a fix so that WP Fastest Cache w/ JS Combined, AOS and Bootstrap can all be used without causing loading issues and console messages.

Plugin Author Emre Vona
(@emrevona)

2 years, 4 months ago

Can you exclude the aos.js as below and try please?
https://www.wpfastestcache.com/features/exclude-page/

Thread Starter jenwhitedesign
(@jenwhitedesign)

2 years, 4 months ago

Done. Doesn’t appear to have fixed anything. Only the path in the console error has changed, showing that aos.js is now separate from the other js files (ie. excluded and not combined)

Plugin Author Emre Vona
(@emrevona)

2 years, 4 months ago

can you contact me via email please: https://www.wpfastestcache.com/contact-us/

Thread Starter jenwhitedesign
(@jenwhitedesign)

2 years, 4 months ago

For anyone that stumbles on this later, the conflict appears to be AOS related rather than WP Fastest Cache related. AOS doesn’t appear to work when “combined” in the WP Fastest Cache settings, so I moved the AOS js to the footer and it works like a charm now.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Conflict with Bootstrap 5 & Animate on Scroll’ is closed to new replies.

Tags