AOS doesn't keep elements off screen when using slide

[bhartvigsen]

The lib works great but it doesn't keep elements off the screen, they're just half way out of the viewport and they just zoom into place from there. Is this intended behavior? Is there a way to make it totally hide elements until they're ready to slide in from the side?

[am-status]

I would also like to know if this functionality is possible as having the element appear out of layout context is very undesirable. Thanks

[HuwJanus]

I agree - this seems to be the only effect that fails like this - All elements that slide in are clearly visible before they start to slide.

[Hendrikv1990]

I agree too.. Noticed the problem on several occasions and it's really strange for users.

For now I just switched the animations to more simple ones..

[mathiasmadsen]

I have solved this with a slightly hacky solution for now :)

[data-aos="slide-left"] {
    margin-right: -30%;
    &.aos-animate {
        margin-right: 0%;
    }
}
.main { //Hide overflow for main content
    overflow: hidden;
}

[michalsnik]

Yeah it should be possible. I guess you're not using fade animations then. You can either add custom animations according to readme, or create PR with updated slide animations here :)

[michalsnik]

You can also override default animation:

[data-aos="slide-left"] {
  visibility: hidden;
  &.aos-animate {
    visibility: visible;
  }
}

That should do the job. Default ones don't hide them indeed. It'll be fixed in 3.0, this change is already on next branch :)