Stack Overflow
Stack Overflow

Questions tagged [animate-on-scroll]

26 questions
5
votes
0 answers

Get the element that triggered AOS custom event

I have several elements that trigger a custom event when they are inview (entered the viewport) with the latest Animate On Scroll library (https://github.com/michalsnik/aos). https://codepen.io/anon/pen/vMGQEb HTML:
sdvnksv
  • 9,350
  • 18
  • 56
  • 108
4
votes
0 answers

AOS Library not working except for on refresh

I am building a website in which a div needs to slide in from the left to the right when it is scrolled into view. I am using the AOS library to animate it, but it is not working unless I scroll the element into view, and then refresh the…
Riley Wilton
  • 53
  • 6
3
votes
2 answers

Navbar goes out when I add animate on scroll feature

I am trying to implement animate on scroll in my site here using AOS HTML
user11078680
2
votes
2 answers

AOS (animate on scroll) library not working when selecting elements to animate with jQuery

I'm trying to animate H1 elements for many pages using AOS (animate on scroll). I have several pages that use the title so I'm selecting all the titles with jQuery. If I type in the attributes manually in each title it works, but not when adding…
charlesFromSoCal
  • 37
  • 1
  • 1
  • 6
2
votes
0 answers

how to fix opacity 0 and transform on mobile with aos.js?

I use AOS.js to animate on scroll in NUXT. AOS inited off animation on mobile, but some blocks in v-for loading with 0 opacity and transformed. This blocks have custom css hovers with transition. I try use wrapper for aos and animate only him but it…
Remi Fokz
  • 121
  • 1
  • 1
  • 8
2
votes
5 answers

How to make AOS not working with Slick slider?

I am using AOS to show html elements on scroll. It works well alone, but when I use it on the pages that contains Slick slider, the elements on which is AOS applied are not showing. Elements are hidden and if there is a lot scroll, it looks like the…
emir
  • 1,336
  • 1
  • 14
  • 33
1
vote
0 answers

React-reveal on scroll is being affected by Scroll-to-top component on location change

I'm building a website and I'm using react-reveal to animate content on my pages(home page about page, and contact page) as I scroll to them, Then I noticed that the way react navigate pages is through the 'react-router' which just renders a new…
Emeka Orji
  • 174
  • 4
  • 11
1
vote
0 answers

How to activate animation on Animate on Scroll library on up scroll

I want the animation to be triggered in both down and up scroll but AOS b default on triggers animation on down scroll. This is my code
img5
I tried putting…
Badal S
  • 507
  • 1
  • 3
  • 20
1
vote
1 answer

Using AOS (animate on scroll) inside a div with overflow

I'd really like some things to animate onto screen when I scroll down to them, as they do here... https://michalsnik.github.io/aos/ The problem is my site is actually nested inside a div called 'main-content' with seperate divs for the side bar and…
bboybeatle
  • 549
  • 1
  • 8
  • 28
1
vote
1 answer

fullpagejs and AOS - not working together

I'm using fullpagejs and AOS to make some divs popping up from the bottom of the page on scroll (or at least that's what I'd like to achieve). Unfortunately, it is not working. Yes, I've read the FAQ sections of fullpage and yes, scrollbar is set to…
Nick
  • 13,493
  • 8
  • 51
  • 98
0
votes
0 answers

Does animate.css support animation on scroll

I am using Animate.css on webpage and i was wondering if animate.css supports animation when user scrolls down the page. I came across wow.js but that seems to be very old script i was wondering if animate.css has build in support for scroll. …
Learning
  • 19,469
  • 39
  • 180
  • 373
0
votes
3 answers

How to add animate on scroll effect to fetched data react

Context: I want to add an AOS-effect to multiple divs filled with data from a server, which are rendered after the initial render: import {useEffect, useState} from "react"; export const Test = () => { const [data, setData] = useState([]); …
Philip F.
  • 1,167
  • 1
  • 18
  • 33
0
votes
1 answer

threejs, animejs, can't "animate on scroll" imported gltf files. only primitives working

I was experimenting with threejs, animations (animejs) and scroll event. here's a working codepen: https://codepen.io/cristigoia/pen/JjPMQMP On line 30 i add the cube to the scene: function addCube () { cube = new THREE.Mesh( new…
mosf
  • 63
  • 3
0
votes
1 answer

AOS Library: last

I seem to have a problem with the AOS (animate-on-scroll) library in my html page. The code works fine, but the issue is that the last div doesn't run its AOS code (fade-right) until the user is scrolling over it within a certain range of pixels,…
user15613304
0
votes
0 answers

Unable to import a npm module I downloaded

I'm running a SvelteKit application with the Animate on Scroll (aos) module. This worked like a charm but due to the nature of my project, I needed to modify a few lines in the module, so I pulled the project from GitHub, modified it, rebuilt it and…
koean
  • 36
  • 1
  • 5
1
2