diff --git a/packages/app/components/ui/motion/SlideMotion.tsx b/packages/app/components/ui/motion/SlideMotion.tsx
index 8d4c202..2080385 100644
--- a/packages/app/components/ui/motion/SlideMotion.tsx
+++ b/packages/app/components/ui/motion/SlideMotion.tsx
@@ -77,9 +77,8 @@ class SlideMotion extends React.PureComponent<Props, State> {
                         <div
                             className={styles.container}
                             style={{
-                                // TODO: inverse for RTL language
-                                WebkitTransform: `translateX(-${interpolatingStyle.transform}%)`,
-                                transform: `translateX(-${interpolatingStyle.transform}%)`,
+                                // @ts-ignore see https://stackoverflow.com/a/52013197/5184751
+                                '--transition-progress': `${interpolatingStyle.transform}%`,
                             }}
                         >
                             {React.Children.map(children, (child, index) => (
diff --git a/packages/app/components/ui/motion/slide-motion.scss b/packages/app/components/ui/motion/slide-motion.scss
index 147ef7d..622ee48 100644
--- a/packages/app/components/ui/motion/slide-motion.scss
+++ b/packages/app/components/ui/motion/slide-motion.scss
@@ -1,5 +1,11 @@
 .container {
     white-space: nowrap;
+    transform: translate(var(--transition-progress));
+
+    html[dir='ltr'] & {
+        // noinspection CssInvalidFunction works fine in a browser (:
+        transform: translate(calc(var(--transition-progress) * -1));
+    }
 }
 
 .item {