AOS - Animate on scroll - JavaScript library
Questions tagged [aos.js]
61 questions
3
votes
4 answers
Using AOS with Nuxt3
Anyone already used AOS or vue-aos package with Vue3?
I'm getting bunch of errors due probably to ssr (Vue is not defined, document is not defined) despite disabling in on config.
nuxt.config.ts
export default defineNuxtConfig({
plugins: [
{…
Nymrinae
- 43
- 3
3
votes
1 answer
AOS(Animation on scroll) is not working in React js
Here is my App.js Code
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import AOS from "aos";
import "aos/dist/aos.css";
import Home from "../Home/Home";
AOS.init();
function App() {
return (
<>
…
Nimra Haider
- 119
- 3
- 11
3
votes
1 answer
Problem with AOS.js not working when Slick.js is on the same page
Seems to be a problem to get AOS.js working properly when there is also a Slick.js slider on the same page.
How to get this working having both on the page (Slick slider need to be there)
I have included the scripts and css
mr_typo3
- 77
- 9
2
votes
2 answers
Having issues using AOS animation with svelte kit
I'm using for the first time svelte for a portfolio and coming from React I must say it's really fun and easy to use !
But recently i had issues using AOS with svelte kit. Mostly when I'm going from a page to another using href the animations won't…
Alexandre Houmeau
- 21
- 1
- 3
2
votes
1 answer
Add AOS attributes by Javascript
I am trying to add the attributes to launch AOS animations via javascript, but it is not working correctly. Now, adding the attributes by js, when the animation is launched, instead of showing the element, it hides it. I think it may be because the…
bpardo
- 401
- 5
- 11
2
votes
2 answers
How to change HTML AOS delay value using javascript or CSS
First time seeking help on here, hoping there is a simple answer for this. I am using AOS - Animate on Scroll library in my website and I want to be able to change the aos delay value based on the screen width as I need different delay times…
tjurie
- 21
- 1
- 5
1
vote
1 answer
How to implement scroll-triggered animations in Next.js 13?
I am wondering how to implement scroll-triggered animations in Next.Js 13 properly.
I have tried to use a scroll-triggered animation library like AOS, but in order for it to work, it needs to be initialized inside a useEffect hook, which requires…
Gal Povsod
- 101
- 1
- 7
1
vote
0 answers
Rails 7, Importmaps and AOS.js is not working
i downloaded this template here https://bootstrapmade.com/regna-bootstrap-onepage-template/
my goal is to get it going in rails 7. i copied the content of index.html to experiment.erb.html.
And i copied the javascript content to app javascript.
my…
Namaste
- 11
- 1
1
vote
1 answer
Adding AOS animation to all elements with specific class
I want to add AOS animation to all elements that have a class of animate_right. I used this code and it adds all of the html (attributes and classes) to the tag only the animation does not work. Here is my code
…
PeggyMe
- 33
- 3
1
vote
1 answer
how change AOS animate z-index?
i use AOS animate for my website ,but the elements that have AOS animate is placed on the navbar. how can i change the element's(the elements that have AOS animate) z-index to put navbar on everyelements.
This site has a practice mode for me and I…
Masir
- 327
- 1
- 11
1
vote
0 answers
Animation on scroll not working in mobile view in React JS
I'm using aos library in react. it is working perfectly in desktop view. I initialized it correctly but when I'm trying the responsive mode, it is not working.
I made a custom hook to use it easier. here is my code:
useAOS.js
import AOS from…
muller
- 41
- 8
1
vote
0 answers
AOS just work with first element (Angular)
Animation for few elements works fine, but not for all. I tried and inspect issue in browsers developer tool and found that "aos-animate" class does not get applied to those elements.
Any Guess why it is happening?
More inputs
I have …
Mounaim
- 61
- 1
- 7
1
vote
1 answer
AOS animation not working when changing tabs?
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks =…
beginner854
- 11
- 3
1
vote
1 answer
AOS appears to not be working correctly with Animate.css + mdboostrap
I'm currently making a portfolio site for myself, but it appears to be broken in a way that I do not understand; oddly enough I cannot get AOS and Animate.CSS to work on the website. I am hosting on GitHub pages (yes, I included a .nojekyll file).…
FxllenCode
- 63
- 1
- 1
- 14
1
vote
0 answers
Toggling class on scroll when div enters viewport with CSS scroll-snap
I have a vertical slideshow that scrolls/sticks to the next panel when the user scrolls. Desired effect is https://www.tesla.com but I thought I could achieve this with CSS (example below).
Example 1: https://codepen.io/moy/pen/poNrVdO
The problem…
user1406440
- 1,329
- 2
- 24
- 59