michalsnik / aos

Animate on scroll library
MIT License
26.51k stars 2.57k forks source link

RTL support #829

Open mirismaili opened 1 year ago

mirismaili commented 1 year ago

Expected left/right animations have a variant that is automatically mirrored (left <-> right) in RTL layouts. Yes! I mean start/end.

This is:

Specifications

Possible Solution

[data-aos^=fade][data-aos^=fade] {
    // ...
  .aos-animate {
    // ...
  }
}
[data-aos=fade-start] {
  [dir=rtl] & {
    transform: translate3d(-100px, 0, 0) // same as `fade-right`
  }
  transform: translate3d(100px, 0, 0) // same as `fade-left`
}
[data-aos=fade-end] {
  [dir=rtl] & {
    transform: translate3d(100px, 0, 0) // same as `fade-left`
  }
  transform: translate3d(-100px, 0, 0) // same as `fade-right`
}

Detailed Description

asifsabu commented 1 month ago

Another apporach

[data-aos=fade-right] { &:lang(ar) { transform: translate3d(100px, 0, 0); } } [data-aos=fade-left] { &:lang(ar) { transform: translate3d(-100px, 0, 0); } }

Hossein96Rz commented 1 month ago

It would be very better if it was possible to disable this feature