使用AOS滚动使元素“增长”

Question

我正在尝试重新创建动画效果，当您在视口中到达元素（div或图像）时，它们从左向右增长。

您可以在此处通过文本框看到效果。

https://codepen.io/mhuff/pen/bRYJyj

[data-aos="grow-left"] {
transition-property: all;
}

[data-aos="grow-left"].aos-animate {

right: 0;
width: 100%;

}

[data-aos="grow-right"] {
width: 0;
transition-property: width;
}

[data-aos="grow-right"].aos-animate {
width: 100%;
}

由于某种原因，我无法重新创建此效果。如果您从笔中拿出css，它似乎不起作用。

任何帮助将不胜感激。

谢谢