aos
aos copied to clipboard
michalsnik
Element loads without animation if already in viewport
This is:
- Bug
Specifications
- AOS version: most recent
- OS: Windows 10
- Browser: chrome
Expected Behavior
When a page loads, I want an element in the center of the screen to animate on load,
Actual Behavior
The element just loads without animation. The elements below it that have animation load fine on scroll
Steps to Reproduce the Problem
Detailed Description
Possible Solution
Just a suggestion (Im not the developer for AOS.js). Try the data-aos-anchor=".another-element" feature. This lets you trigger animations when a certain element denoted by ID or class is in view
Example
<div data-aos="fade-up" data-aos-anchor=".other-element"></div>
Just a suggestion (Im not the developer for AOS.js). Try the data-aos-anchor=".another-element" feature. This lets you trigger animations when a certain element denoted by ID or class is in view
Example
<div data-aos="fade-up" data-aos-anchor=".other-element"></div>
Andy, can you or someone else elaborate how data-aos-anchor works? I have a div I want to show when page loads and disappear as soon as navbar is no longer visible. Anchoring to it's class or id doesn't work with (nothing happens when it goes out of view). Help appreciated!
@spogulis Did you manage to get this done? I am also seeking a solution.
Thanks.
@spogulis Did you manage to get this done? I am also seeking a solution.
Thanks.
No, Ryon, it's still unclear how anchoring to an element is supposed to work.
@spogulis I will try to explain to you how it works with the example.
Imagine that code:
The behavior will be: On the scroll, when the element "#trigger-elt" will appear in the viewport, the "#animated-elt" will be displayed. You put the code in the element you want to animat and put the anchor name of the element you want to observe as a trigger.
@spogulis I will try to explain to you how it works with the example.
Imagine that code:
The behavior will be: On the scroll, when the element "#trigger-elt" will appear in the viewport, the "#animated-elt" will be displayed. You put the code in the element you want to animat and put the anchor name of the element you want to observe as a trigger.
@oritlewski, that's what I intuitively though and may be it works with anchor elements that are not in viewport when the page loads (haven't tested) , but it doesn't work as explained in my previous example (when anchor is an element within viepowort on page load, i.e. navbar).
also having this problem. nothing above the fold / within the viewport in initially will animate.
I ran in to this very same issue as described here and all reduced test cases worked fine. So in the end, I narrowed it down to specific markup set on my element that was causing the issue.
I had display: inline; set on my element so once I removed that, the animation worked fine on load at the top of the viewport. So it's possible I suppose that other display types set in CSS may be an issue as well though I have not tested to that extent.
I've found that my animations don't run at all until I resize the viewport. I have animations set to fade up on animate on scroll. On a normal page load the animations never run. If I have Chrome dev tools open at the bottom of the window, resize that and then scroll the element out and then back into view, the animation runs!
The workaround posted above doesn't work for me unfortunately.
This fix worked for me: https://github.com/michalsnik/aos/issues/429#issuecomment-451130906
Including the CSS separately from the JS fixed this issue for me.
Try this for yourself by temporarily following the Basic install instructions instead of the package manager instructions.
Presumably bundling the CSS with the JS has some effect on the initial animation state which means the browser doesn't have a chance to start from the beginning of the animation, but rather half way through.
Including the CSS separately from the JS fixed this issue for me.
Try this for yourself by temporarily following the Basic install instructions instead of the package manager instructions.
Presumably bundling the CSS with the JS has some effect on the initial animation state which means the browser doesn't have a chance to start from the beginning of the animation, but rather half way through.
This also worked for me, part of my webpack js bundling incorporated style-loader to support in saving dependant styling in the library. Not having that initial styling already existing within the css when the AOS initiates probs caused the issue.
Bundling the styling in the css instead within the js resolved the issue.
Issue still exists? There is no "force" feature for certan elements already in viewport? Tred everything from comments and nothing works.
Im having the opposite problem here where its animating on load but i dont want it to, anyone know how to disable that?
Thats what I see in the codepen example they shared https://codepen.io/michalsnik/pen/WxNdvq
