Questions tagged [animate-on-scroll]
26 questions
0
votes
1 answer
AOS (animate-on-scroll) elements invisible on static site
I'm making a site for a client and trying to implement AOS library to make it look more dynamic.
I've followed instructions from the GitHub :
Add to
Add before…
Jack Scott
- 99
- 12
0
votes
1 answer
Gatsby/React - fade out section on scroll?
I've been trying to use gatsby-plugin-scroll-reveal which uses Sal.js to animate a hero section on my site. I'm trying to make it so that the text in the hero fades in then fades out as you scroll down the page. Right now, I can only get it to fade…
taylor018
- 351
- 2
- 16
0
votes
1 answer
Use AOS.js with class instead of data attribute
I want to use AOS.js on my site but I have no option to add the necessary data attributes to the DIVs of the page.
Here's the markup from the docs (https://michalsnik.github.io/aos/):
…
Cray
- 5,307
- 11
- 70
- 166
0
votes
0 answers
AOS(animate on scroll) not working in fullscreen
I have a website where i have added AOS animation.
Prathamesh Doke
- 797
- 2
- 16
- 38
0
votes
1 answer
On scroll animation issue on small screens using Vanilla JS
I’ve created an animation for my website to change a certain element (for example its background colour) while scrolling using Vanilla JS. For this I have used the window.onscroll property and I trigger the animation when window.scrollY reaches a…
Prastut Dahal
- 27
- 1
- 6
0
votes
0 answers
How to set height of parent div to the height of just one (of multiple) child elements
On the homepage of my website I'm using the animate-on-scroll library to reveal different parts of the page while scrolling down. I want the parent div to initially just have the height of the first child div (.intro). When scrolling down, the…
ecj
- 1
0
votes
1 answer
Why does animate-on-scroll in router outlet not work and how to fix it?
I am trying to get animations on scroll to work within an angular7 frontend, however it doesn't work within a router-outlet.
I assume this has to do with how angular handles scrolling position within router-outlets as suggested by a lot of related…
ioto
- 11
- 1
0
votes
1 answer
How come the same object may return different instanceof in different browsers?
I am using the AOS plugin and it passes an object on custom event. The object looks like this:
[object Object]: {detail: Object}
detail: Object
accessKey: ""
align: ""
attributes: Object
baseURI:…
sdvnksv
- 9,350
- 18
- 56
- 108
0
votes
1 answer
Using AOS library with Vue
I use AOS (Animate on scroll) library with vue. AOS provides custom JS event: document.addEventListener('aos:in', ({ detail }) => {
console.log('animated in', detail);
});
I would like to fire a function when this event happens.
How do I apply…
kabugh
- 305
- 1
- 9
- 30
0
votes
1 answer
Implementing AOS into wordpress makes the targeted elements blank instead of fade-in
I am trying to implement Michalsnik's Animate On Scroll plugin into my wordpress website. But when I make the following div with "data-aos", as instructed, the element turns out blank instead of fading in.
Ben Viatte
- 485
- 1
- 5
- 16
-1
votes
1 answer
Background video animates on scrolling frustration
I'm about to make a website that I want to have a video background that advances only on page scrolling. I had found a solution at the start of the year but no matter how much I search or keyword searches for it again and failed miserably.
I…
guardedrelic
- 3
- 1