question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Conflicting with AOS Animations

See original GitHub issue

short description of the bug / issue, provide more detail below.

Slick is causing issues with AOS animations on scroll reveal. See https://github.com/michalsnik/aos/issues/309

====================================================================

[ https://credify.one ]

As in the other issue, you can see this is causing problems of no animation on desktop browser.

In the js/main.js, everything works fine when I comment out the Slick initialisation.

====================================================================

Steps to reproduce the problem

  1. Initialise Slick on document ready.
  2. Initialise AOS after or before (both do not work).
  3. Scroll an AOS data-tagged element into view.

====================================================================

What is the expected behaviour?

Expect element to animate when scrolled into view.

====================================================================

What is observed behaviour?

Nothing animates.

====================================================================

More Details

  • Doesn’t seem to happen on mobile.
  • jQuery 1.1.3 & Slick 1.8.1

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:10

github_iconTop GitHub Comments

4reactions
rtoenjescommented, Dec 16, 2019

On https://github.com/michalsnik/aos/issues/155#issuecomment-514591450 I found this solution for me:

$(window).on('load', function () {
  AOS.refresh();
});
$(function () {
  AOS.init();
});
1reaction
magic-dreamcommented, May 28, 2019

I also have the same error AOS with slick slide. please anyone can solve.

Read more comments on GitHub >

github_iconTop Results From Across the Web

I'm using AOS library to give animation but it is not working on ...
html - I'm using AOS library to give animation but it is not working on some div - Stack Overflow. Stack Overflow for...
Read more >
Add AOS Animations to elementor - super easy! - Dotwall
Want to try a different way to animate your widgets in Elementor? We guide you through how to use AOS animations on Elementor...
Read more >
Re: AOS animated sections disappear in page editor
I was using AOS animations (https://github.com/michalsnik/aos) library developing my pages. All works fine. However, when I edit modules in HubSpot's page ...
Read more >
AOS (Animate on Scroll) - how to target elements without ...
I've often gone to AOS for basic scrolling animations and it works ... he might conflict with other behavior attached to those classes/ids)....
Read more >
aos - Bountysource
The class animate is not added to the browser. Both in Chrome and Firefox. ... Steps to Reproduce the Problem. Removed AOS styles....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found